没有Jank CSS条纹

创建CSS条纹通常涉及repeating-linear-gradient或硬停机梯度。使用相同的颜色在两个颜色停止中使用相同的颜色来实现单个条纹，而多个条纹在停止之间使用不同的颜色（共享中间颜色）。例如：

背景：重复线性级别（
  45deg，
  黑色的，
  黑色10px，
  ＃444 10px，
  ＃444 11px
）；

这会在黑色背景下产生倾斜的深灰色条纹10px。但是，出现渲染不一致的情况可能会出现，有些条纹看起来比其他条纹更轻或更薄。这可能是由于子像素渲染。较厚的条纹（5px或更多）不太明显。

使用linear-gradient和background-size并让其重复提供更平滑的解决方案。挑战在于计算最佳background-size ，尤其是对于角度的条纹。尽管毕达哥拉斯定理似乎相关，但计算变得复杂。

一个有用的解决方案是专用的生成器工具（由于原始文本中未提供链接，因此省略了链接）。该工具处理确定正确background-size所需的复杂数学，从而产生完美的条纹。基础JavaScript（省略链接）显示了涉及的复杂计算。

虽然repeating-linear-gradient提供了一种更直观的方法，但其视觉上的不一致是必须使用经过精心计算的background-size的linear-gradient以获得最佳结果。

以上是没有Jank CSS条纹的详细内容。更多信息请关注PHP中文网其他相关文章！