CSS旋转带border的div出现异常细线问题求助

这种异常细线条是浏览器对旋转元素进行亚像素渲染/抗锯齿处理时产生的误差——当元素旋转后，border与背景的边缘在像素层面无法完全对齐，导致出现细微的色差线条。以下是几种无需额外div就能解决问题的方法：

方法1：添加backface-visibility: hidden #

该属性强制浏览器以更精确的方式渲染元素，减少亚像素层面的渲染误差：

body {
  background-color: black;
}

div {
  width: 50px;
  height: 50px;
  background-color: white;
  border: 50px solid black;
  transform: rotate(45deg);
  backface-visibility: hidden;
}

方法2：用filter: blur(0)触发硬件加速 #

模糊值为0的滤镜会触发浏览器硬件加速，提升旋转元素的边缘渲染精度，消除细线条：

body {
  background-color: black;
}

div {
  width: 50px;
  height: 50px;
  background-color: white;
  border: 50px solid black;
  transform: rotate(45deg);
  filter: blur(0);
}

方法3：使用paint-order: stroke强制优先绘制border #

该属性指定浏览器先绘制border（stroke）再绘制元素背景，让border覆盖住可能出现的细线条：

body {
  background-color: black;
}

div {
  width: 50px;
  height: 50px;
  background-color: white;
  border: 50px solid black;
  transform: rotate(45deg);
  paint-order: stroke;
}

以上方法均无需额外嵌套div，能直接让border按预期工作，且在主流现代浏览器中都有良好的兼容性。

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