抵消纯css中的边框效果

Question

我正在尝试创建一种偏移边框效果。这可以用纯css来完成吗？

这些是按钮，所以会有不同的大小和颜色。

​

​

Answer 1

我使用了伪元素:after来创建偏移边框效果。

​

body {
  background: black;
  padding: 30px;
}
div {
  background: white;
  height: 75px;
  width: 175px;
  position: relative;
}
div:after {
  content: '';
  background: transparent;
  border: 1px solid white;
  top: 7px;
  right: 7px;
  bottom: -7px;
  left: -7px;
  position: absolute;
  z-index: -1;
}

<div></div>

​

Answer 2

更新

正如web-tiki pointed out在对这个答案的评论中所说的那样，你可以用box-shadow完全实现整个效果。在这里看看他们的JSFiddle演示：https://jsfiddle.net/5a0bvyup。

注意:在我的回答中，我将前景框设置为红色而不是白色，以证明此“偏移边框”不会与初始元素重叠。你需要自己把它改回白色。

左侧边框和底部边框

你可以用box-shadow很容易地实现左边框和下边框。你只需要创建一个与背景颜色匹配的实心阴影，然后在它后面添加第二个与前景颜色匹配的阴影，偏移一个像素：

​

body {
  background: black;
  padding: 30px;
}

div {
  background: red;
  height: 72px;
  width: 192px;
  
  box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white;
}

<div></div>

​

上边界和右边界

然后，您可以使用伪元素(::before和::after)填充这些额外的边框：

​

body {
  background: black;
  padding: 30px;
}

div {
  background: red;
  height: 72px;
  width: 192px;
  
  box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white;
  position: relative;
}

div::before {
  background: white;
  content: '';
  position: absolute;
  height: 1px;
  width: 7px;
  top: 6px;
  right: 100%;
}

div::after {
  background: white;
  content: '';
  position: absolute;
  height: 7px;
  width: 1px;
  top: 100%;
  right: 6px;
}

<div></div>

​