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

我试图依靠CSS来创建导航菜单栏的双边框，其中顶部有双边框，底部有双边框。我还希望两行有1px的阴影来创建嵌入式外观。是否可以在CSS中创建双边框？

enter image description here

如何做到这一点使用CSS？

2012-04-23 Daphne

看到这个http://stackoverflow.com/questions/5753351/how-在线制作双线边框在CSS中每行不同颜色无-u – 2012-04-23 07:44:47

@JitendraVya这有点不同，因为两条线彼此重叠。我想要两条线在图像之间有一个空间，我不确定如何在阴影和边框之间制作填充/边距。 – Daphne 2012-04-23 08:20:21

怎么了？

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

来源

2012-04-23 07:42:45 Starx

@ F.Calderan我试过这个，但是可以确定两行之间的高度并为所有行创建1px的阴影？ – Daphne 2012-04-23 08:26:45

@Daphne，您可以使用嵌套元素来模拟效果，然后填充。 – Starx 2012-04-23 08:29:38

您可以使用: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/

来源

2012-04-23 07:46:37 sandeep

谢谢！这很好。我想知道是否有可能为所有边界添加阴影？我已经对两个div元素（div和div：after）应用了阴影框，但只有底部的两个边框显示阴影。 – Daphne 2012-04-23 09:26:34

你也可以通过双边框属性来实现这一点也检查这个http://jsfiddle.net/ECFBR/9/ – sandeep 2012-04-23 09:27:56

双边框的工作，但问题是，它不允许你调整双边界（如第一条边界线和第二条边界线）。如果您尝试应用箱形阴影，它也只适用于底线。 – Daphne 2012-04-24 05:33:06

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

回答

相关问题