为何1px宽的旋转伪元素线条比1px边框视觉上更粗？

当你旋转1px的水平线条时，浏览器会通过**抗锯齿（Anti-Aliasing）**处理斜线的边缘——因为斜线无法完美对齐屏幕的像素网格，浏览器会填充周围半透明的像素来让线条看起来更平滑，这就导致视觉上线条变粗了。而盒子的边框是垂直/水平的，能精准贴合像素，所以看起来是标准的1px粗细。

这里提供几种能让斜线和边框视觉粗细一致的方法：

方法1：缩放伪元素的Y轴 #

利用三角函数计算，45°斜线的视觉厚度是原厚度的1/sin(45°)≈1.414倍，所以我们可以通过scaleY(0.707)来抵消这个视觉差异：

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

.box::before {
  content: '';
  display: block;
  width: 141.4213562px;
  height: 1px;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(45deg) scaleY(0.707);
  transform-origin: 0 0;
}

方法2：使用SVG绘制斜线 #

SVG的矢量线条渲染机制更适合斜线，不会出现视觉变粗的问题：

<div class="box">
  <svg width="100%" height="100%">
    <line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="1" />
  </svg>
</div>

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: relative;
}
svg {
  position: absolute;
  top: 0;
  left: 0;
}

方法3：使用线性渐变背景 #

用linear-gradient直接在盒子上绘制斜线，这种方式渲染也更自然：

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: linear-gradient(45deg, transparent calc(50% - 0.5px), black calc(50% - 0.5px), black calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

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