盒子周围的蚀刻边框

时间:2016-03-13 07:37:10

标签: html css3

我有一个盒子,我已经创造了一个"蚀刻"使用CSS将#bbb行和#fff行放在一起,将垂直线放在一起:

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

蚀刻垂直线: enter image description here

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

3 个答案:

答案 0 :(得分:2)

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

CSS

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

您可以在边框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>