如何在CSS中创建条纹

当想到在CSS中创建条纹时，我的脑海立即转向渐变，repeating-linear-gradient并采取严格措施。您可以通过在两个色标之间使用相同的颜色来制作一条条纹，而在另外两个色标之间使用另一种颜色（或更多条）（在中间共享一个）来制作另一条条纹（或更多条）。

像这样：

background: repeating-linear-gradient(
45deg,
black,
black 10px,
#444 10px,
#444 11px
);

这将使成角度的深灰色条纹在黑色上相隔10px。

但这是它在我的屏幕上呈现的方式：

您能看到其中一个或两个条纹比其他条纹更亮，更细的渲染简略效果吗？我不知道为什么。我认为这与子像素渲染等有关。这并不难复制。不仅是这两种颜色，也不是这个特定的角度几乎就是用所创建的任何条纹repeating-linear-gradient。但是，它不再具有较明显的条纹（例如，5px较粗）那么明显。

我举了几个例子。条纹更紧密的另一种方式尤为盛行：

前几天，我需要这样做，找到了简陋的感觉，并记得我们条纹文章中的这个小纸条。它等于：不要使用repeating-linear-gradient。只需使用linear-gradient，设置一个background-size并让其重复即可。确实，这似乎可以解决问题。问题是……您要制造多大的background-size？如果条纹是垂直或水平的，则很容易弄脏东西。但是，如果条纹成一定角度，则计算完美的宽度×高度非常困难。我猜想它与勾股定理有关，但是我在那儿不够深入。