css - 是否可以在 CSS 中创建双边框？

Question

我正在尝试依靠 CSS 为导航菜单栏创建双边框，其中顶部有双边框，底部有双边框。我还希望两条线有 1px 的阴影来创建嵌入式外观。

我如何使用 CSS 做到这一点？

Answer 1

您可以:after为此使用属性。像这样写：

CSS

div{
    height:30px;
    position:relative;
    border-top:1px solid green;
    border-bottom:1px solid green;
    margin:10px;
}
div:after{
    content:'';
    position:absolute;
    top:-3px;
    bottom:-3px;
    left:0;
    right:0;
    border-top:1px solid green;
    border-bottom:1px solid green;
}

HTML

<div></div>

检查这个http://jsfiddle.net/ECFBR/8/

Answer 2

有什么问题？

border-top: 3px #000 double;
border-bottom: 3px #000 double;