conic-gradient画环形进度条的核心原理是用360°圆锥渐变配合裁剪或遮罩实现动态扇形显示：需将起点校正至顶部（from calc(0.25turn - var(--p) * 1turn)），以var(--p)控制0–1范围的进度比例，再通过mask或clip-path限定可见区域，避免默认铺满整圆。
conic-gradient 画环形进度条的核心原理
圆锥渐变本身不支持“从某角度开始、只画一段弧”的语义，它默认从 0deg 开始逆时针铺满 360deg。所以实现进度条的关键不是“画一段”，而是用两层 conic-gradient 叠加：底层填色（如灰色），上层用动态角度覆盖有效进度部分（如蓝色），再配合 background-clip: text 或 mask 露出环形轮廓。
更常用且兼容性更好的做法是：用一个 border-radius: 50% 的正方形容器，配合 conic-gradient 生成完整色盘，再用 clip-path: inset() 或 mask 裁出环形区域——但注意，mask 在 Safari 旧版本中行为不一致，而 clip-path 对渐变裁剪的支持有限。
真正稳定可控的方式是：用两个同心圆（外圆 border + 内圆 background）模拟环形，再把 conic-gradient 应用在外圆的 border-image 上——但 border-image 不支持动画，且 IE 完全不支持。
结论：最实用的方案是单层 conic-gradient + mask（现代浏览器），或退化为 SVG <circle></circle> + stroke-dasharray（兼容性优先）。
用 conic-gradient + mask 实现可动画的环形进度条
需要确保容器是正方形，且 mask 图像本身也是正方形并居中；否则会出现偏移或拉伸。mask 的白色区域显示内容，黑色区域隐藏——所以 mask 必须是一个带透明圆环的 PNG，或用 radial-gradient 构造。
实际推荐用 CSS 生成 mask：
mask: radial-gradient(transparent 60%, #000 60%);
这个写法在 Chrome/Firefox 中生效，但在 Safari 15.4–16.3 中会忽略 mask 的颜色值，只认 alpha 通道，所以必须写成：
mask: radial-gradient(transparent 60%, black 60%);
-
mask必须作用在设置了conic-gradient的元素上，不能只加在父容器 - 进度角度用
background: conic-gradient(from calc(0.25turn - var(--p, 0) * 1turn), #4f46e5 0%, #4f46e5 var(--p, 0), transparent 0)实现：减去0.25turn是为了让 0% 从顶部（12 点钟方向）开始，而非默认右侧 -
var(--p)是 0–1 的小数，代表完成比例；不要直接用 deg，否则动画插值会跳变 - 动画需加在
--p自定义属性上，而不是background，否则重绘开销大且不平滑
常见错误：进度不从顶部开始、动画卡顿、Safari 不显示
错误现象包括：进度条从右边开始、转半圈就停、在 Safari 里整个消失、数值更新后不重绘。
- 没减
0.25turn→ 进度从 3 点钟方向开始；正确写法：from calc(0.25turn - var(--p) * 1turn) - 用
deg单位做动画 → 浏览器无法插值，导致跳跃；必须统一用turn或小数（0.3） - Safari 不支持
mask的 color 关键字 → 改用black/white，避免#000或rgb(0 0 0) - 没设
transform: rotate(-90deg)补偿 → 某些 mask 方案下仍需手动旋转对齐，尤其当 mask 是radial-gradient生成时 - 容器未设
aspect-ratio: 1或明确宽高 → 导致 mask 失准，环形被压扁
替代方案：为什么有时候该放弃 conic-gradient
当项目需支持 iOS 15.2 以下、Android WebView 旧版、或 Electron 旧内核时，conic-gradient 和 mask 都不可靠。此时 SVG 是唯一稳妥选择。
SVG 方案只需一个 <circle></circle>，通过 stroke-dasharray 和 stroke-dashoffset 控制绘制长度，配合 transform="rotate(-90)" 对齐顶部起点。JS 更新时仅修改两个属性，性能好、兼容广、动画丝滑。
如果非要用 CSS，可考虑伪元素叠加法：主元素画满圆环（conic-gradient），伪元素用 radial-gradient 遮住中心，再用 overflow: hidden 和 transform: rotate() 控制露出角度——但这本质是“旋转遮罩”，精度低、难对齐、动画易撕裂。
真正上线前，务必在真机 Safari、微信内置浏览器、以及目标最低 Android WebView 版本中实测 mask 是否生效；很多时候，多几行 SVG 比调试三小时 CSS 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
