如何实现CSS中repeating-linear-gradient的重复颜色渐变效果？

本文共计993个文字，预计阅读时间需要4分钟。

由于没有理解‘重复单元’的长度逻辑：

实操必须显式控制单次循环长度：

• 写法要带长度单位，例如 repeating-linear-gradient(to right, red 0px, red 10px, blue 10px, blue 20px)，明确告诉浏览器「20px 是一个完整周期」
• 所有色标位置必须用绝对长度（px、em 等），不能混用百分比和长度，否则行为不可控
• 首尾色标位置必须严格对齐，比如 red 0px 和 red 20px 才能形成无缝衔接；若写成 red 0px, blue 15px, red 20px，最后 5px 就是空白或裁剪

怎么让 repeating-linear-gradient 和 background-size 配合好？

background-size 控制的是「单个重复图案块」的尺寸，不是整张背景图。很多人以为设 background-size: 40px 就能让渐变每 40px 重复一次，结果发现纹路错位——其实是渐变自身的周期长度和 background-size 没对齐。