关于CSS repeating-linear-gradient颜色停止点与重复次数的疑问

一、颜色停止点的含义 #

red 0%指的是在渐变的**起始位置（元素最左端）**颜色为红色，是这个颜色段的开始点。整个渐变单元的过渡逻辑是：

• 从0%到10%：颜色从红色平滑过渡到绿色
• 从10%到20%：颜色从绿色平滑过渡回红色

这里的百分比是相对于单个渐变重复单元的长度而言的，0%、10%、20%都是这个单元内的位置标记。

二、为什么会重复五次 #

repeating-linear-gradient的核心逻辑是用你定义好的渐变单元循环填充整个元素。
你定义的渐变单元覆盖了0%到20%的区间，这个单元的长度占元素总宽度的20%。元素总宽度是100%，用总占比除以单个单元的占比：100% ÷ 20% = 5，所以这个渐变单元会刚好重复五次，填满整个600px宽的div。

换个直观的数值例子：div宽度600px，单个渐变单元的宽度就是600×20%=120px，600÷120=5，刚好能放下5个完整的渐变单元。

内容的提问来源于stack exchange，提问作者user9026