如何修复CSS :after伪元素生成圆形的不规则边框？

这种边框发虚、边缘不规则的情况我之前也碰到过好几次，大多是浏览器渲染时的像素对齐偏差或者抗锯齿逻辑导致的，给你几个实用的解决思路：

1. 确保尺寸为偶数，避免半像素渲染 #

浏览器对奇数尺寸的元素渲染时，容易出现半像素模糊（尤其是边框部分）。如果你的圆形宽高、边框宽度是奇数，改成偶数试试：

.your-target-element:after {
  width: 20px; /* 调整为偶数 */
  height: 20px;
  border-radius: 50%;
  border: 2px solid #your-border-color; /* 边框宽度也尽量用偶数 */
}

2. 添加精准定位与硬件加速 #

给伪元素加上transform属性，一方面精准修正定位偏移，另一方面触发硬件加速优化渲染：

.your-target-element:after {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 精准居中避免偏移模糊 */
  transform: translate(-50%, -50%);
  /* 触发硬件加速，优化渲染精度 */
  transform: translate(-50%, -50%) translateZ(0);
  /* 其他基础样式 */
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #blue;
}

3. 用背景模拟边框（替代border属性） #

如果border属性的渲染始终有问题，可以换一种思路：用外层伪元素做边框色，内层用背景色填充模拟圆形，这种方式渲染更稳定：

.your-target-element:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #your-border-color;
  padding: 2px; /* 这个值就是边框宽度 */
  box-sizing: border-box;
}
/* 内层用伪元素或者子元素填充背景色 */
.your-target-element:after::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #your-inner-bg-color;
}

4. 调整抗锯齿规则（极端情况） #

如果以上方法都无效，可以尝试强制浏览器使用更锐利的渲染规则，但这个方法不推荐全局使用，只针对目标元素即可：

.your-target-element:after {
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

建议先从第一、第二种方法试起，这两个是最常用也最有效的方案，一般都能解决边框不规则的问题。

内容的提问来源于stack exchange，提问作者STUDIOTOPO