沒有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中文網其他相關文章！