先记住这个答案
conic-gradient() 以圆心为起点，沿顺时针方向把颜色铺满 360 度。你给几个色标，它就从第一个色标开始扫，扫到最后一个色标结束，剩余角度用最后那个颜色填。repeating-conic-gradient() 的区别在于，色标段结束后不是用末色填充，而是从头再来一遍，重复铺满整圈。所以 conic-gradient 适合画饼图（每个色块占固定角度），repeating-conic-gradient 适合画等分条纹、棋盘格这类重复图案。
conic-gradient只画一圈- 重复锥形渐变按角度平铺
- 相邻色标角度相同可以画硬边色块
- 配合
border-radius: 50%变成饼图
用 conic-gradient 画饼图
饼图的思路很简单：把容器裁成圆形，然后用硬边锥形渐变画出各个扇区。所谓硬边，就是让前一个颜色的结束角度和下一个颜色的开始角度完全一样，没有渐变过渡。
.pie {
width: 200px;
height: 200px;
border-radius: 50%; /* 裁成圆形 */
background: conic-gradient(
#3b82f6 0deg 120deg, /* 蓝色占 120 度 */
#f59e0b 120deg 210deg, /* 橙色占 90 度 */
#10b981 210deg 360deg /* 绿色占 150 度 */
);
}每个颜色写两个角度，第一个是开始角度，第二个是结束角度。前一个颜色的结束角度和后一个颜色的开始角度一样（都是 120deg、210deg），所以色块之间没有渐变过渡，是清晰的硬边。 如果你希望色块之间有柔和过渡，把中间的角度稍微错开就行。比如蓝色结束在 118deg，橙色从 122deg 开始，中间 4 度的范围就会出现渐变。
repeating-conic-gradient 做重复图案
repeating-conic-gradient 的用法和 conic-gradient 一样，区别是色标段铺完后会自动从头重复。
.checkerboard {
width: 200px;
height: 200px;
background: repeating-conic-gradient(
#000 0deg 90deg,
#fff 90deg 180deg
);
background-size: 50px 50px; /* 每个重复单元 50x50 */
}这里定义了黑白各占 90 度，铺满 180 度。repeating-conic-gradient 把这 180 度重复两次填满 360 度。配合 background-size 控制每个单元的大小，就得到了棋盘格效果。
如果换成 conic-gradient，写同样的色标，超出 180 度的部分会一直是白色（最后一个颜色），不会重复，也就画不出棋盘格。
和径向渐变、线性渐变的关系
三种渐变的区别在于颜色分布的方向。linear-gradient 是沿一条直线铺，radial-gradient 是从中心向外辐射，conic-gradient 是绕圆心转一圈。所以锥形渐变特别适合做圆形的可视化：饼图、环形进度条、色相环。
做环形进度条时，可以在 conic-gradient 的基础上叠一个白色的小圆，遮住中间部分。或者用 mask 属性裁出环形区域。这比用 SVG 的 stroke-dasharray 实现起来更简单，也不需要算路径长度。
角度单位除了 deg，还可以用 turn（一圈 = 1turn）和百分比。画饼图时用百分比最直观：conic-gradient(#3b82f6 0% 33%, #f59e0b 33% 58%, #10b981 58% 100%)，数据是多少就写多少，不用换算成角度。
容易答错的地方
- 以为
conic-gradient是从上方开始的 - 默认的起始角度是 12 点钟方向（正上方），但可以用
from关键字改变起点。比如conic-gradient(from 90deg, ...)就是从 3 点钟方向开始。如果发现饼图的起始位置不对，先检查有没有设from。 - 漏了硬边写法导致色块之间有渐变
- 只写
conic-gradient(#3b82f6 33%, #f59e0b 58%, #10b981)的话，33% 到 58% 之间有蓝色到橙色的渐变过渡。要画清晰的色块，必须让前一个颜色的结束位置和下一个颜色的开始位置重合：#3b82f6 0% 33%, #f59e0b 33% 58%。 - 把
background-image和background-color搞混 conic-gradient()生成的是图片，赋值给background-image或background缩写都行。但如果写了background-color: conic-gradient(...)，浏览器不会识别，因为background-color只接受纯色值。
面试官还会怎么问？
怎么用纯 CSS 做一个环形进度条？
用 conic-gradient 画一个只占部分角度的色块（比如 conic-gradient(#3b82f6 0% 70%, #e5e7eb 70% 100%)），再在中间叠一个白色圆形遮住中心区域，就是一个 70% 进度的环形条。进度值可以用 CSS 自定义属性 --progress 来动态控制。
conic-gradient 能做色相环吗？
能。写 conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 就是一个完整的色相环。起始和结束都是红色，中间的颜色会自动渐变过渡。再用 border-radius: 50% 裁成圆就行。
锥形渐变在移动端有兼容性问题吗？
conic-gradient 从 Chrome 69、Safari 12.1、Firefox 83 开始支持，覆盖率已经很高。repeating-conic-gradient 的支持时间和 conic-gradient 一致。IE 不支持，但如果需要兜底，可以用 background-color 写一个纯色降级。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。