1. 首页
  2. css

没有Jank CSS条纹

当我想到在CSS中创建条纹时,我立刻想到了repeating-linear-gradient和硬停止渐变。您可以在两个色站之间使用相同的颜色制作一条条纹,而在两个色站之间使用不同的颜色制作另一条条纹(或更多条)(共享中间的一条)。
就像这样:
background: repeating-linear-gradient(45deg,black,black 10px,#444 10px,#444 11px);
,它会使黑色的深灰色条纹相隔10像素。
但这就是它在我的屏幕上呈现的方式:
你能看到呈现出一个或两个条纹看起来比其他条纹更轻更薄的刺耳感吗?我不知道为什么。我想这和亚像素渲染之类的东西有关。这并不难复制。它不仅仅是这两种颜色或者这个特殊的角度是任何用repeating-linear-gradient产生的条纹。它不再是如此明显与较厚的条纹(例如,5px和更厚)。我举了几个例子。这个条纹更紧的是另一种方式,尤其是普雷维兰特:
我前几天需要这样做,发现了Jankines,并记住了条纹文章中的这个小注释。等于:不要用repeating-linear-gradient。只需使用linear-gradient,设置background-size,并让它重复。事实上,这似乎起到了作用。问题是…你把background-size做多大?如果条纹是垂直或水平的,很容易弄脏东西。但是如果条纹成一个角度…计算完美的宽度×高度是很棘手的。我猜这和毕达哥拉斯定理有关,但我在这方面做得太深了。那么,你怎么办?
使用这个漂亮的小生成器工具:
它会做任何必要的花哨数学来正确处理它。您可以在这里看到未统一的JavaScript。搜索/ GET BACKGROUND SIZE /查看所有的数学运算。不管它在那里做什么,条纹都很完美。
有点遗憾repeating-linear-gradient没有更好的视觉输出,因为这更容易推理,但是嘿,你必须做你该做的。

没有Jank CSS条纹 为WP2原创文章,链接:https://www.wp2.cn/css/%e6%b2%a1%e6%9c%89jank-css%e6%9d%a1%e7%ba%b9/