首页 >> HTML+CSS >> 如何在CSS中创建条纹

如何在CSS中创建条纹

287865 2021-02-24 0
浏览次数241

当想到在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?如果条纹是垂直或水平的,则很容易弄脏东西。但是,如果条纹成一定角度,则计算完美的宽度×高度非常困难。我猜想它与勾股定理有关,但是我在那儿不够深入。

全部评论:0