纯css中的偏移边框效果

Question

我正在尝试创建偏移边框效果。这可以用纯CSS来完成。

这些是按钮，因此尺寸和颜色会有所不同。

Answer 1

更新

对于此答案的评论中的web-tiki pointed out，您可以完全使用box-shadow实现完整的效果。在这里查看他们的JSFiddle演示：https://jsfiddle.net/5a0bvyup。

我将在我提交的状态中留下我的答案，因为它确实了解了他们的实施方式（如果仔细观察，你会看到他们的box-shadow与一个人的不同之处如下所述）。

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

左下边界

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

Answer 2

我使用伪元素：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>