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

Posted 2023-05-07

【中文标题】使用css ::after [重复]添加边框

【英文标题】：Add border using css ::after [duplicate]

【发布时间】：2021-10-14 02:34:25

【问题描述】：

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

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

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

【问题讨论】：

为什么不试试border+outline属性呢？

因为我在盒子上已经有了一个边框。

所以你想要一个边框，它实际上是在盒子里面......你有没有为盒子尝试过position: relative;，为你的 ::after 元素尝试过position: absolute;？我的意思是，::after 是绝对的 div 并且你有一个 top: 50%; left: 50%; transform: translate(-50%, -50%); 和它的宽度/高度 hiwever 想要的 ::after 元素，需要一个边框（？）

【参考方案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>