如何在底部添加多个边框？

Question

我想在div中添加两个额外的底部边框，使其看起来像附加图像：

我需要为此添加两个额外的空div吗？我有非常基本的标记：

<div class="box">
    main div
</div>

以下是基本演示： http://jsfiddle.net/3TWtF/

Answer 1

是的，您需要添加两个<div/>，如下所示：http://jsfiddle.net/UUDd3/这将提供最兼容的解决方案。

添加以下HTML：

<div class="box2">
    &nbsp;
</div>
<div class="box3">
    &nbsp;
</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;
}

Answer 2

你可以在没有两个额外的div的情况下完成它，但是需要删除对IE7的支持，因为你需要使用伪元素。

jsFiddle

.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;
}