使用css ::after [重复]添加边框

Question

我正在尝试添加框内的边框，我需要在此之后或之前使用css，如何实现此效果？

.box {
  width: 100px;
  height: 100px;
  background: red;
}

<div class="box"></div>

Answer 1

有很多不同的方法可以实现这种效果，每种方法都有自己的优缺点（包括不同的属性如何影响文档流）：

带有负偏移的轮廓

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  outline: 2px solid darkred;
  outline-offset: -7px;
}

<div class="box"></div>

边框和阴影

.box {
  width: 100px;
  height: 100px;
  border: 2px solid darkred;
  background-color: red;
  box-shadow: 0 0 0 5px red;
}

<div class="box"></div>

::之后

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: red;
}

.box::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border: 2px solid darkred;
}

<div class="box"></div>