conic-gradient能直接画环形进度条，因其从中心按角度顺时针辐射渐变，天然适配0°→360°环形填充；需用border-radius:50%确保正圆，配合transparent色标与伪元素遮罩中心实现空心效果。
conic-gradient 为什么能直接画环形进度条
因为 conic-gradient 是从中心点按角度顺时针辐射的渐变，不是从中心向外发散（那是 radial-gradient），也不是线性延伸（那是 linear-gradient）。它天然适合表达“0°→360°”的环形填充，只要控制好色标断点，就能卡出任意百分比的扇形区域。
常见错误是把 conic-gradient 和 radial-gradient 混用，结果画出来是个实心圆盘或模糊晕染，而不是清晰的环形弧段。
- 必须设
border-radius: 50%让容器成正圆，否则渐变会拉伸变形 - 渐变起始色和结束色之间要用
transparent衔接，否则边缘会有颜色硬边或重叠 - 角度单位必须用
deg或turn，不能写小数百分比（如75%）——CSS 不认这个在conic-gradient里
如何用 CSS 变量动态控制进度值
核心是把百分比转成角度：var(--percentage) * 3.6deg（因为 100% = 360°），再用 calc() 注入到渐变中。注意：CSS 变量只能在声明时用 var()，不能直接参与运算，所以必须套一层 calc()。
示例代码：
div.progress-ring {
width: 120px;
height: 120px;
border-radius: 50%;
background: conic-gradient(
#4a90e2 0deg,
#4a90e2 calc(var(--percentage) * 3.6deg),
transparent 0deg
);
}
使用时只需设置内联变量：<div class="progress-ring" style="--percentage: 65"></div>
- 如果进度为 0，
calc(0 * 3.6deg)得 0deg，整个环就是transparent，看起来空白——这是预期行为 - 别用
%单位写角度（如var(--percentage)deg），那会变成 “65deg”，不是 “234deg”，数值完全错位 - 想支持 0–100 以外的值（比如超进度 110%），得加
clamp()或 JS 校验，CSS 本身不拦截越界
为什么中间要盖一层白色圆盘
conic-gradient 填充的是整个元素背景，包括中心区域。如果不遮盖，你会看到一个实心扇形，而不是「环形」——也就是只有描边宽度那圈有颜色，中间是空的。
最轻量做法是用伪元素盖住中心：
.progress-ring::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 70%; height: 70%;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
}
- 盖层尺寸建议用百分比（如
70%），而非固定像素，避免响应式下错位 - 如果容器有
background-color，盖层颜色要和它一致，否则边缘会漏底色 - 别用
box-shadow: inset模拟空心——它无法精确控制内径，且在高缩放下有渲染毛刺
conic-gradient 在旧浏览器里根本不可用怎么办
conic-gradient 在 Safari 15.4+、Chrome 88+、Firefox 89+ 才稳定支持；iOS Safari 15.4 之前、所有 Edge Legacy 版本均不支持。上线前必须检查目标用户环境。
兜底方案不是“降级为文字”，而是用 SVG + stroke-dasharray 实现功能等价的环形条——它兼容 IE9+，且动画更可控。
- 不要在同一个元素上写
background: conic-gradient(...), radial-gradient(...)试图多渐变 fallback——浏览器会整条声明失效 - 可以用
@supports (background: conic-gradient(red, blue))包裹现代样式，再在外面写 SVG 备用结构 - 若项目已用 PostCSS，
postcss-conic-gradient插件只做语法转换，**不生成 polyfill**，别被名字误导
真正麻烦的不是写两套，而是进度数字同步和动画节奏对齐——SVG 那套需手动算周长、绑定 stroke-dashoffset，而 conic-gradient 直接靠 CSS 变量驱动，逻辑不在同一层。上线前务必在真机上测 iOS 14 和 Android 10 的表现差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
