在CSS开发中，生成多阶渐变颜色是常见的样式需求，比如数据可视化中的色阶条、页面背景的条纹装饰、进度条的分段效果等。如果手动编写线性渐变并逐个添加颜色节点，不仅代码冗长，调整颜色时也需要逐个修改参数，效率很低。repeating-linear-gradient函数可以重复指定的渐变片段，能够快速生成规则的多阶色带，大幅简化代码编写。
repeating-linear-gradient基础语法
repeating-linear-gradient是CSS中用于创建重复线性渐变的函数，它的语法和linear-gradient类似，核心区别在于它会把定义的渐变片段在指定方向上重复平铺。基础语法如下：
/* 语法格式 */ repeating-linear-gradient(方向, 颜色节点1 位置1, 颜色节点2 位置2, ...);
其中方向可以是角度（比如45deg）或者关键词（比如to right、to bottom），颜色节点和位置的定义和linear-gradient一致，位置可以使用像素、百分比等单位。当渐变片段的长度小于容器尺寸时，就会自动重复填充整个容器。
生成多阶色带的核心逻辑
要生成多阶色带，只需要把单个色带的宽度和颜色定义好，repeating-linear-gradient会自动把这个单色带重复排列。比如要生成宽度为20px的红、蓝、绿三色交替的色带，只需要定义0-20px的渐变片段，然后让函数重复这个片段即可。
这里需要注意颜色节点的位置设置：最后一个颜色节点的位置就是单个渐变片段的长度，后续的重复会从0开始重新计算位置。如果颜色节点位置设置不合理，可能会出现渐变过渡而不是清晰的色带分界。
实用代码示例
示例1：水平三色等宽色带
生成红、蓝、绿三种颜色等宽的水平色带，每个色带宽度为30px：
.color-bar {
width: 300px;
height: 50px;
/* 单个渐变片段为0-30px，红到蓝，30px-60px蓝到绿，60px是单个片段长度 */
background: repeating-linear-gradient(
to right,
red 0px,
red 30px,
blue 30px,
blue 60px,
green 60px,
green 90px
);
}
示例2：垂直渐变色阶条
生成从浅到深的多阶垂直色阶，每个色阶高度为10%，共10个阶：
.gradient-scale {
width: 60px;
height: 300px;
background: repeating-linear-gradient(
to bottom,
#f0f0f0 0%,
#f0f0f0 10%,
#d0d0d0 10%,
#d0d0d0 20%,
#b0b0b0 20%,
#b0b0b0 30%,
#909090 30%,
#909090 40%,
#707070 40%,
#707070 50%,
#505050 50%,
#505050 60%,
#303030 60%,
#303030 70%,
#101010 70%,
#101010 80%,
#000000 80%,
#000000 90%,
#000000 90%,
#000000 100%
);
}
示例3：倾斜条纹背景
生成45度倾斜的红白条纹背景，条纹宽度为15px：
.stripe-bg {
width: 400px;
height: 300px;
background: repeating-linear-gradient(
45deg,
red 0px,
red 15px,
white 15px,
white 30px
);
}
常见问题说明
- 如果色带出现模糊过渡，检查相邻颜色节点的位置是否一致，比如红色结束在30px，蓝色开始也必须是30px，才能保证分界清晰。
- 如果需要调整色带宽度，只需要修改最后一个颜色节点的位置，同时对应调整中间颜色节点的位置比例即可。
- repeating-linear-gradient也支持透明色，可以和其他背景叠加使用，生成半透明的色带效果。
使用repeating-linear-gradient生成多阶色带时，不需要逐个编写所有重复的颜色节点，只要定义好单个片段的规则，浏览器会自动完成重复渲染，大幅减少代码量。
CSSrepeating-linear-gradient多阶渐变色带生成修改时间：2026-06-20 20:54:31