CSS3中的重复渐变并不是一种全新的颜色模型，而是在线性渐变和径向渐变基础上引入的重复机制。它通过让开发者指定一个相对较小的渐变片段，然后沿着某个方向自动循环铺满整个元素区域。这种机制的核心优势在于，可以用极少量的色标定义出原本需要大量计算才能实现的周期图案。理解重复渐变的关键在于色标的处理方式：最后一个色标的位置决定了重复单元的尺度，而这个尺度之外的区域由浏览器按照相同规律自动复制。掌握这一点，就能避免很多在实际使用中出现的图案断裂或错位问题。
与普通渐变的另一个重要区别在于，重复渐变会自动处理非零起点的色标。如果第一个色标没有出现在0%位置，浏览器会从该色标的位置开始重复，而不是强制从0%开始。这意味着无论是创建均匀的条纹，还是带有偏移量的刻度图案，都可以通过精确控制色标位置来实现。接下来将从线性重复渐变、径向重复渐变和锥形重复渐变三个维度展开，并结合实际代码说明其应用方式。
repeating-linear-gradient的色标机制与条纹实现
repeating-linear-gradient的基本语法与linear-gradient类似，同样支持角度或方向关键字作为第一个参数，后面跟一组颜色和位置。区别在于，它不要求渐变铺满整个盒子，而是根据最后一个色标的位置计算出重复周期。例如，如果最后一个色标定义在20px处，那么整个渐变片段的总长度就是20px，浏览器会沿着指定方向每20px重复一次这个片段。
下面这个示例展示了如何用重复线性渐变生成45度方向的等宽条纹。色标分别设置为#2c3e50从0到10px、#ecf0f1从10px到20px，这样每个重复单元内形成了两种颜色各占10px的条纹。由于最后一个色标位于20px，重复周期被确定为20px，整个背景会被自动填充为连续的对角线条纹。
.stripes {
width: 300px;
height: 200px;
background: repeating-linear-gradient(
45deg,
#2c3e50 0px,
#2c3e50 10px,
#ecf0f1 10px,
#ecf0f1 20px
);
}
如果把最后一个色标的位置改为30px，同时保持前面的颜色区域不变，那么每个重复单元的长度就会变成30px，其中前20px是两种颜色的条纹，后10px是空白区域。这个空白会参与循环，导致整个图案呈现出条纹与空白交替的效果。通过调整最后一个色标的位置，可以灵活控制重复周期，而不需要重新计算每一种颜色的长度。
值得注意的一个细节是，如果没有为最后一个色标指定位置，浏览器会默认将其放置在100%，此时重复渐变的周期就是整个元素尺寸，表现与普通线性渐变没有本质区别。因此，使用重复渐变时通常需要把最后一个色标设置在一个较小的数值上，这样才能发挥重复机制的作用。
repeating-radial-gradient的环状图案与刻度盘
repeating-radial-gradient采用与线性重复渐变相同的色标重复逻辑，但重复的方向从直线变成了从圆心向外辐射。它的色标位置是相对于径向渐变的半径来计算的，最后一个色标的位置决定了重复环的宽度。利用这一特性，可以非常方便地创建同心圆环、光晕扩散效果以及类似仪表盘的刻度环。
下面这段代码定义了一个重复径向渐变，从圆心开始交替出现深色和浅色圆环，每个环的宽度为15px。色标依次为#34495e从0到15px、#bdc3c7从15px到30px，因此重复周期为30px。整个容器会被从中心向外扩展的环形条纹完整覆盖。
.rings {
width: 260px;
height: 260px;
border-radius: 50%;
background: repeating-radial-gradient(
circle at center,
#34495e 0px,
#34495e 15px,
#bdc3c7 15px,
#bdc3c7 30px
);
}
径向重复渐变还可以与其他背景层叠加使用，借助background-blend-mode或直接使用多个背景图像来创建更复杂的视觉效果。例如在仪表盘场景中，可以先使用一个普通径向渐变作为底层的整体配色，再叠加一个重复径向渐变作为刻度环，最后通过修改色标的起止位置来调整刻度的疏密程度。相比用边框或SVG绘制刻度，这种纯CSS方案在响应式布局中更容易维护。
径向重复渐变的另一个实际用途是生成放射性条纹或日光图案。将圆形渐变中心设置在容器中心，使用较窄的重复周期，就能得到类似放射状光芒的背景。这种图案如果使用JavaScript动态计算角度并逐个绘制线段，会消耗较多的计算资源，而使用重复径向渐变只需要几行CSS声明。
repeating-conic-gradient的扇形重复与进度环
锥形渐变conic-gradient本身已经提供了一种绕中心点旋转分布颜色的能力，重复锥形渐变则把这个能力进一步扩展为周期性重复的扇形区域。repeating-conic-gradient的色标位置以角度为单位，最后一个色标的角度决定了扇形片段的跨度。这种机制非常适合用来创建饼图分割线、罗盘刻度、彩色色轮以及各类环状加载动画的静态部分。
以下示例创建了一个每45度切换一次颜色的放射状色盘。颜色从#e74c3c开始，到#f1c40f结束，每个色标相隔15度，最后一个色标位于45度处。浏览器会每45度重复一次这个片段，最终形成一个由八种颜色组成的完整圆环。
.color-wheel {
width: 240px;
height: 240px;
border-radius: 50%;
background: repeating-conic-gradient(
#e74c3c 0deg,
#e67e22 15deg,
#f1c40f 30deg,
#2ecc71 45deg
);
}
在进度环的实现中，重复锥形渐变通常不会单独使用，而是与mask或clip-path配合。可以先创建一个完整的重复锥形渐变背景，代表进度条的轨道刻度，然后再使用一个普通锥形渐变覆盖上层，通过CSS变量动态控制上层渐变的角度范围。这样做的好处是，轨道部分的刻度图案完全由重复渐变负责，进度变化时只需要更新上层渐变的角度，不会影响到刻度的渲染逻辑。
需要注意的是，repeating-conic-gradient在较旧版本的浏览器中支持度略低。对于需要兼容旧环境的项目，可以考虑使用repeating-linear-gradient配合transform来模拟部分效果，但代码复杂度会明显上升。在现代浏览器中，推荐直接使用标准语法，并根据实际需求通过@supports查询提供降级方案。
实际应用中的组合技巧与注意事项
重复渐变的最大价值在于它可以作为构建复杂背景的基础图层。多个重复渐变可以通过逗号分隔同时作用于同一个元素，不同的渐变层可以使用不同的background-size和background-position进行控制。例如，一个卡片背景可以同时包含顶部细密的横向条纹和底部的大间距垂直条纹，只需声明两个重复线性渐变并分别设置不同的重复周期即可。
色标位置的精确计算是使用重复渐变时最容易出错的地方。特别是当颜色数量较多时，建议在开发工具中临时调整色标值，观察图案的变化规律，确认周期长度后再写入最终样式。由于重复渐变的颜色过渡发生在每个重复单元的边界处，如果相邻重复单元的边界颜色不一致，就会产生明显的接缝。解决方法是确保每个重复单元的第一个色标和最后一个色标的颜色相同，或者在边界处使用过渡平滑的颜色值。
以下示例综合使用了三种重复渐变，分别模拟出直尺刻度、表盘刻度和装饰条纹，所有背景层被叠加在同一个div元素上。通过background-position调整各层的位置，可以让它们在视觉上互不干扰。
.composite {
width: 500px;
height: 300px;
background:
repeating-linear-gradient(
to right,
#ccc 0px,
#ccc 1px,
transparent 1px,
transparent 10px
) 0 0 / 100% 100%,
repeating-linear-gradient(
to bottom,
#999 0px,
#999 2px,
transparent 2px,
transparent 20px
) 0 0 / 100% 100%,
repeating-conic-gradient(
#ddd 0deg,
#fff 1deg,
#ddd 1deg,
#fff 10deg
) center / 120px 120px no-repeat;
}
这段代码展示了重复渐变作为背景图案生成器的能力。第一层是水平方向每10px出现一条1px的细线，第二层是垂直方向每20px出现一条2px的粗线，第三层则是一个位于中心、尺寸为120px乘120px的扇形刻度盘。通过调整background-size和background-repeat，可以将不同类型的刻度组合在同一个界面中，而且全部由CSS完成，不需要任何额外的图片资源。
在使用重复渐变时，还有一个常见的性能考量。虽然浏览器对渐变渲染已经做了大量优化，但在移动端设备上，超大面积的重复渐变如果叠加了过多的背景层，仍然可能对滚动性能产生轻微影响。对于这种情况，建议将渐变层数控制在合理范围内，或者在动画过程中避免频繁改变渐变相关的属性。大多数场景下，两到三层的重复渐变完全能够满足视觉需求，同时保持流畅的渲染体验。
CSS3重复渐变repeating-linear-gradientrepeating-conic-gradient修改时间：2026-08-27 14:57:00