第二边框元素

我需要做的第二边界，而不使用图像，所以我的想法是让另一个DIV父里面一个前：第二边框元素

<div class="box news"> 
    <div class="title">{l_news}</div> 
    <marquee behavior="scroll" direction="left" loop="-1" scrollamount="3" scrolldelay="0">{news}</marquee> 
    <div class="border"></div> 
</div>

我的CSS是：

.box{ 
    float: left; 
    position: relative; 
    margin: 15px; 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border: 2px solid #9a9a9a; 
} 
.box div.title{ 
    clear: left; 
    width: 100%-10px; 
    height: 22px; 
    padding-top: 2px; 
} 
.border{ 
    width: 100%-2px; 
    position: absolute; 
    top: 0px; left: 0px; 
    border-radius: 2px; 
    -webkit-border-radius: 2px; 
    border: 1px solid #d6d6d6; 
}

宽度：100％-10px第一次工作，但不是第二次。为什么？任何建议的方式>

来源

2012-01-22 Itay Grudev

可怕：你可能不是在开玩笑的那个字幕标签... – timoxley

你不能在CSS中做这样的计算。第一条规则工作的唯一原因是因为浏览器遇到语法错误，并且恢复为默认设置。 A div元素的默认行为是延伸到最大可用宽度。

对于title股，我会建议给.box a padding: 10px。

我不是100％清楚你想如何边界，但我认为你应该可以使用left: 2px; right: 2px; top: 2px; bottom: 2px或它的变体。

来源

2012-01-22 14:15:11

你是对的，但我需要关于如何缩小一点点的帮助.border –

@ItehnologicalDisexisting使用'left'，'right'，''顶部“和”底部“不起作用？问题是什么？ –

其实top：0px; left：0px; bottom：0px; right：0px; –

你应该使用一个div，然后给它这个属性outline: 1px solid #d6d6d6;。它会让div看起来像在另一个内部......如果这就是你想要的。

来源

2012-01-22 14:25:29 IROEGBU

'outline'也是一个很好的解决方案，只要你知道它不会增加高度/宽度（这实际上是一件好事）。 –

......但不幸的是，“轮廓”没有圆角支持。 –

宽度：100％-10px第一次工作，但不是第二次。为什么？

它没有“工作”，无效的属性值被忽略。借此例如：

http://jsfiddle.net/gR4GF/1/

div { 
    width: 50%; 
    width: Chuck Norris; 
}

宽度为50%结束。

不管怎么说，如果你想使用额外的标记添加一个额外的边境，不要使用空元素，如<div></div>，而不是包裹在div元素：

http://jsfiddle.net/gR4GF/2/

<div class="box news"> 
    <div class="border"> 
     <div class="title">{l_news}</div> 
     <marquee behavior="scroll" direction="left" loop="-1" scrollamount="3" scrolldelay="0">{news}</marquee> 
    </div> 
</div>

是的，我们都在c 0123那<marquee> - 也许你应该看看javascript solution;）

来源

2012-01-22 14:35:25

废话。每个浏览器都知道把'Chuck Norris'解释为'1000％'。 –

@Pekka：它也处理颜色字体和背景。 Chrome的最新版本的默认样式表实际上就是'Chuck Norris'。 –

你可以使用box-shadow或pseu做元素，创造出多个边界：

http://css-tricks.com/snippets/css/multiple-borders/

使用：前

.box{ 
    float: left; 
    position: relative; 
    margin: 15px; 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border: 2px solid #9a9a9a; 
} 

.box:before { 
    content: " "; 
    position: absolute; 
    z-index: -1; 
    top: 2px; 
    left: 2px; 
    right: 2px; 
    bottom: 2px; 
    border: 2px solid #ffea00; 
}

使用箱阴影

.box{ 
    float: left; 
    position: relative; 
    margin: 15px; 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border: 2px solid #9a9a9a; 
    -moz-box-shadow: 0 0 0 #333; 
    -webkit-box-shadow: 0 0 0 #333; 
    box-shadow: 0 0 0 #333; 
}

如何打造 “100％ - 10px的”

块级元素（例如div）默认占用其父元素的全部宽度。这与宣布的width: 100%不同。因此，如果您将margin-left: 10px添加到您的div中（无需声明宽度），您将实际给予的宽度为100％，减去10px的左边距。

来源

2012-01-22 17:27:37

如果你想要一个双边框，为什么不把它设置在“border”属性上？额外的div标记是没有必要的。

就做这样的事情：

border: 3px double #000;

此外，如果你想在你的CSS使用操作，看看使用CSS预处理程序一样都不能少或SASS的能力。

来源

2012-01-23 15:41:33

第二边框元素

回答

相关问题