我想在一個div增加兩個附加的底部邊框,使其看起來附加的圖像:如何在底部添加多個邊框?
我需要增加兩個額外的空div的是什麼?我有非常基本的標記:
<div class="box">
main div
</div>
這裏是基本的演示: http://jsfiddle.net/3TWtF/
我想在一個div增加兩個附加的底部邊框,使其看起來附加的圖像:如何在底部添加多個邊框?
我需要增加兩個額外的空div的是什麼?我有非常基本的標記:
<div class="box">
main div
</div>
這裏是基本的演示: http://jsfiddle.net/3TWtF/
是的,你需要添加兩個<div/>
就像這樣:http://jsfiddle.net/UUDd3/這將提供最兼容的解決方案。
添加以下HTML:
<div class="box2">
</div>
<div class="box3">
</div>
下面CSS:
.box2{
border-left: 1px solid brown;
border-bottom: 1px solid brown;
border-right: 1px solid brown;
width: 480px;
height: 10px;
margin:0 10px;
}
.box3{
border-left: 1px solid brown;
border-bottom: 1px solid brown;
border-right: 1px solid brown;
width: 460px;
height: 10px;
margin:0 20px;
}
你可以不用兩個額外的div
秒,但它需要放棄對IE7支持,你將需要使用僞元素。
.box{
border: 1px solid brown;
width: 500px;
height: 100px;
position:relative;
}
.box:after {
display:block;
content:"";
position:absolute;
border:1px solid brown;
width:400px;
left:50px;
top:100px;
height:15px;
}
.box:before {
display:block;
content:"";
position:absolute;
border:1px solid brown;
width:300px;
left:100px;
top:116px;
height:15px;
}
IE8支持前/後僞元素,IE7和更低版本不支持。 http://caniuse.com/#feat=css-gencontent – cimmanon
奧普斯,是一個錯字。 –
**的div {邊界:雙;} **嵌套一次可以simplyfy的事情,因爲你的代碼很容易,我會張貼在的jsfiddle片刻 –
你可能想要使用** display:inline ** make it not full width:** https://jsfiddle.net/arifbdev/n03w4wq5/** –