纯CSS中的偏移边框效果 [英] Offset border effect in pure css

问题描述

我正在尝试创建偏移边框效果.可以使用纯CSS做到这一点.

I am trying to create an offset border effect. Can this be done with pure css.

这些是按钮，因此大小和颜色都不同.

These are buttons so will be different sizes and colours.

推荐答案

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

I use pseudo-element :after to create offset border effect.

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>

这篇关于纯CSS中的偏移边框效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！