是否可以在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;