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

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

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

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

主要部门

以下是基本演示：

---

是的，您需要添加两个

如下：这将提供最兼容的解决方案

添加以下HTML：

<div class="box2">
    &nbsp;
</div>
<div class="box3">
    &nbsp;
</div>

---

您可以在没有两个额外的

div

s的情况下完成这项工作，但它需要放弃对IE7的支持，因为您需要使用伪元素

---

IE8支持before/after伪元素，IE7和更低版本不支持。div{border:double；}nested once可能很简单，因为您的代码很简单，我将在几分钟后发布到JSFIDLE上。您可能希望使用display:inline使其不全宽：

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

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