什么是 CSS repeating-conic-gradient() 函数？
在现代网页设计中，渐变不仅仅是背景色的平滑过渡，它已经成为视觉设计的重要组成部分。尤其是 CSS 中的渐变函数，已经从简单的 linear-gradient 和 radial-gradient 演进到更复杂的 conic-gradient，甚至支持重复的版本 —— repeating-conic-gradient()。
这个函数的出现，让开发者可以轻松创建出类似太阳纹、旋转条纹、多边形图案等富有动感的视觉效果。如果你之前用过线性或径向渐变，那么理解 repeating-conic-gradient() 就像学习“升级版拼图”：它依然基于颜色和角度，但结构上更“循环”、更“规律”。
简单来说，repeating-conic-gradient() 是 conic-gradient() 的“循环增强版”。它允许我们定义一个渐变扇区，然后自动重复这个扇区，直到填满整个容器。就像一条无限延伸的彩带，每一段都一样，但旋转着铺满整个画面。
这种能力在制作仪表盘、进度环、装饰边框、图标背景等场景中特别实用。比如，你想要一个 360 度的进度条，每 10 度变一次颜色，用这个函数几行代码就能搞定。
基本语法与参数解析
repeating-conic-gradient() 的语法结构如下：
background: repeating-conic-gradient(
[ <angle> | <color-stop> ]#,
[ <color-stop> ]+
);
虽然看起来有点复杂，但我们可以拆解来看：
- 第一个参数是“角度”或“颜色停靠点”；
- 后续参数是颜色停靠点，可以重复多个；
- 用逗号分隔，每个“扇区”由一个角度 + 一组颜色定义。
不过更常见的是这样写：
repeating-conic-gradient(
from 0deg,
red 0deg,
blue 60deg,
red 120deg
);
这段代码的意思是：从 0 度开始，红色持续到 60 度，然后蓝色从 60 度到 120 度，再回到红色，如此循环。
💡 小贴士：
from 0deg是可选的，但推荐加上，它明确表示从哪个角度开始绘制扇区。
我们来拆解一个典型用例：
background: repeating-conic-gradient(
from 0deg,
#ff6b6b 0deg,
#4ecdc4 60deg,
#45b7d1 120deg,
#96ceb4 180deg,
#feca57 240deg,
#ff6b6b 300deg
);
这段代码会在容器内生成一个六边形风格的渐变图案，每个颜色占据 60 度的扇区，然后循环重复。整个背景就像一个旋转的彩虹轮。
与 conic-gradient() 的区别：理解“重复”的意义
很多人会问：conic-gradient() 和 repeating-conic-gradient() 有什么区别？
最核心的区别就是：是否自动循环。
conic-gradient()：只画一次，从起点画到终点，不重复。repeating-conic-gradient()：画完一个扇区后，自动从起点继续画，直到填满整个容器。
举个例子：
/* conic-gradient：只画一次，可能只显示部分 */
background: conic-gradient(
from 0deg,
red 0deg,
blue 90deg,
green 180deg
);
/* repeating-conic-gradient：自动重复，形成完整图案 */
background: repeating-conic-gradient(
from 0deg,
red 0deg,
blue 90deg,
green 180deg
);
在第一个例子中，如果你的容器是 360 度的圆形，那么只显示 180 度的渐变，剩下 180 度是空白或默认色。而第二个例子会自动把“红→蓝→绿”的组合重复 2 次，填满整个 360 度。
这就像是在做手工：conic-gradient 是“画一幅画”，而 repeating-conic-gradient 是“画一个图案，然后不断复制贴满整个墙”。
实用案例 1：制作进度环
进度环是 repeating-conic-gradient() 的经典应用场景。我们可以用它来实现一个 360 度的圆形进度条，比如表示电池电量、加载进度。
假设我们要做一个 75% 的进度环：
.progress-ring {
width: 200px;
height: 200px;
border-radius: 50%;
background: repeating-conic-gradient(
from 0deg,
#e0e0e0 0deg,
#e0e0e0 270deg, /* 75% 的 270 度 */
#4caf50 270deg,
#4caf50 360deg
);
/* 注意：这里使用了两个颜色段，0-270 是灰色（未完成），270-360 是绿色（已完成） */
/* 由于 repeating，它会自动重复，所以我们只定义一次即可 */
}
解释一下：
#e0e0e0 0deg：从 0 度开始，灰色，持续到 270 度；#e0e0e0 270deg：这里重复声明颜色，表示“从 270 度开始，继续灰色”；#4caf50 270deg：从 270 度开始，绿色；#4caf50 360deg：绿色持续到 360 度。
因为是 repeating，所以整个 360 度被完整覆盖，且 75% 的区域为绿色，25% 为灰色。
✅ 提示：如果想动态调整进度，可以用 CSS 变量控制角度，例如
--progress: 75%;，然后通过calc(3.6 * var(--progress))计算角度。
实用案例 2：创建六边形装饰背景
repeating-conic-gradient() 非常适合做装饰性背景。比如，我们可以创建一个六边形网格风格的底纹，常用于卡片、按钮或界面底图。
.hex-grid {
width: 400px;
height: 400px;
background: repeating-conic-gradient(
from 30deg,
#f0f8ff 0deg,
#f0f8ff 60deg,
#c0c0c0 60deg,
#c0c0c0 120deg
);
/* 60 度一循环，共 6 个扇区 */
/* 每个扇区 60 度，两色交替，形成六边形 */
border-radius: 10px;
}
这里的关键是：60 度为一个单位。因为 360 ÷ 60 = 6，所以会形成 6 个对称的扇区。通过交替颜色，我们模拟出六边形的视觉结构。
你可以尝试把颜色换成深色，比如 #1a1a1a 和 #333，就会变成酷炫的暗色网格背景。
常见问题与调试技巧
在使用 CSS repeating-conic-gradient() 函数时，初学者常遇到几个问题：
1. 渐变没有显示？检查角度顺序
角度必须按从小到大排列，否则浏览器会忽略。比如：
/* ❌ 错误写法 */
repeating-conic-gradient(
from 0deg,
red 90deg,
blue 0deg
);
/* ✅ 正确写法 */
repeating-conic-gradient(
from 0deg,
red 0deg,
blue 90deg
);
2. 图案不对称？确认角度是否整除 360
如果你希望图案完整闭合，最好让每个扇区的角度是 360 的因数，比如 30、45、60、90、120、180。
3. 颜色过渡不自然？使用颜色停靠点控制
避免使用 red 0deg, blue 360deg 这种写法，因为 360 度等于 0 度，会导致重叠。推荐写成：
red 0deg,
blue 60deg,
green 120deg
这样每个颜色段明确结束，不会产生模糊过渡。
总结与进阶建议
CSS repeating-conic-gradient() 函数是一个强大但被低估的工具。它让开发者能用纯 CSS 实现复杂、动态的视觉效果，而无需依赖图像或 JavaScript。
通过本文的学习，你应该已经掌握了：
- 它的基本语法与核心逻辑；
- 与 conic-gradient() 的本质区别；
- 两个实用案例：进度环与六边形背景；
- 常见问题的排查方法。
接下来可以尝试：
- 使用 CSS 变量动态控制角度，实现可交互的进度条；
- 结合
clip-path或mask制作更复杂的形状； - 在 SVG 中嵌入该渐变，实现更精细的控制。
记住：一个看似简单的函数，背后是几何与美学的结合。当你能熟练使用 repeating-conic-gradient() 时，你的 CSS 能力就已经迈入新台阶。
最后，无论你是新手还是有一定经验的开发者，只要多动手试一试，就能发现这个函数带来的无限可能。别忘了，真正的设计灵感，往往藏在一行行代码里。