是否可以在CSS中创建双边框?

时间:2012-04-23 07:39:20

标签: css css3

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

enter image description here

如何使用CSS执行此操作?

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

什么错了?

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