盒子周围蚀刻的边框

Question

我有一个方框，我在其中创建了一条“蚀刻”的垂直线，方法是将一条#bbb行和一条#fff行放在一起，使用CSS：

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

蚀刻的垂直线：

​

有没有人知道我怎么才能让盒子周围的整个边框都有同样的蚀刻效果？

Answer 1

您可以应用box-shadow来实现这种蚀刻效果。

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上设置几种有趣的(很少使用的)样式

将它们结合起来，您可以在请求上实现几个有趣的变体

请注意，灰色是自动计算的。另请参阅第四个示例，以实现与标准特效不同的特效

​

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>

​