css - 纯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>