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

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