如果不是 45 度的倍数，为什么 CSS 线不尖锐？

Question

当使用重复线性渐变时，我注意到除非渐变以 45 度的倍数的角度旋转，否则线条不锐利而是非常块状。

Here is a Codepen that illustrates this issue. 如您所见，前三个非常锐利（它们都以 45 度的倍数旋转），而后三个（未以 45 度的倍数旋转）是块状和像素化的。

例如，在下面的代码中，div.fourfive 给出了一条非常锐利的线条，而 div.onezerozero 给出了一条块状和像素化的线条。

div.fourfive {
  background: repeating-linear-gradient(45deg, 
        black, black .5em, #CE360A 0, #CE360A 1.2em);
}

div.onezerozero {
    background: repeating-linear-gradient(100deg, 
        black, black .5em, #CE360A 0, #CE360A 1.2em);
}

这是什么原因？

Answer 1

边缘未消除锯齿。由于突然的颜色变化，渲染引擎不会创建平滑的过渡。想要突兀，就不一定要流畅！

然而，即使颜色之间只有 0.1 em 的距离也会改变这一点；然后会有一个过渡。

div.onezerozero {
  background: repeating-linear-gradient(100deg, 
    black, black .4em, #CE360A .5em, #CE360A 1.1em, black 1.2em);
}

http://codepen.io/anon/pen/GprPjd

这样行吗？

如果不是 45 度的倍数，为什么 CSS 线不尖锐？

Why are CSS lines not sharp if not at multiples of 45 degrees?

css

stylesheet

web