盒子周围的蚀刻边框

Question

我有一个盒子，我已经创造了一个＆＃34;蚀刻＆＃34;使用CSS将#bbb行和#fff行放在一起，将垂直线放在一起：

div#product_details_separator {
    height:100px;
    width:0px;
    border-left:1px solid #bbb;
    border-right:1px solid #fff;

蚀刻垂直线：

有谁知道我怎么能给整个边框带来同样的蚀刻效果？

Answer 1

您可以应用box-shadow来实现蚀刻效果。 See the DEMO

CSS

.box {
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #bbb;
}

Answer 2

您尝试做的事情听起来有点像插图边框式，可能值得研究。但是，要添加第二层边框，可以使用outline属性。这允许您指定直接围绕边界的轮廓。

border: 1px solid #bbb;
outline: 1px solid #fff;

Answer 3

您可以在边框w3c doc

上设置几种有趣（并且很少使用）的样式

结合它们，您可以根据您的要求实现几个有趣的变体

请注意，灰色颜色是自动计算的。另见第4个例子，以达到与标准效果不同的特殊效果

div {
    width: 100px;
  height: 80px;
  display: inline-block;
}  
.one {
  border: groove 20px lightblue;
}
.two {
  border: ridge 20px lightgreen;
}
.three {
  border: inset 20px tomato;
}
.four {
  border-top: groove 20px tomato;
  border-left: groove 20px tomato;
  border-right: ridge 20px tomato;
  border-bottom: ridge 20px tomato;
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>