直接用 bg-gradient-conic 无法实现环形进度条，因其仅支持静态三色渐变，不解析 CSS 变量、calc() 或响应式角度计算；必须结合原生 CSS 的 conic-gradient、自定义变量 --p 和 radial-gradient mask 才能精准对齐并兼容 Safari。
为什么直接用 bg-gradient-conic 无法实现环形进度条
Tailwind 的 bg-gradient-conic 工具类只生成静态三色过渡（如 from-red-500 via-yellow-500 to-blue-500），它不解析 CSS 变量、不支持 calc() 角度计算，也无法响应式更新渐变断点。你写 bg-[conic-gradient(from_calc(0.25turn_-_var(--p)_*1turn),_#3b82f6_0%,_#3b82f6_var(--p),_#e5e7eb_var(--p))] 是无效的——Tailwind 不处理括号内的表达式，更不会把 --p 注入到 background 值中。
必须手动写 CSS 变量 + conic-gradient + mask
真正可用的方案是：用 Tailwind 控制容器结构（aspect-square、w-32、rounded-full），把渐变逻辑交还给原生 CSS。关键三要素缺一不可：
- 用
style="--p: 0.65;"注入进度值（范围 0–1） - background 必须写成：
conic-gradient(from calc(0.25turn - var(--p) * 1turn), #3b82f6 0%, #3b82f6 var(--p), #e5e7eb var(--p), #e5e7eb 100%) - 裁剪圆环必须用
mask: radial-gradient(circle, transparent 60%, black 60%)，不能依赖clip-path: inset()—— Safari 对后者支持差，容易错位
常见错误：进度条“漂移”或“被切掉一半”
根本原因不是代码写错，而是 mask 和 conic-gradient 没对齐：
- 确保容器宽高严格相等（
aspect-square比w-32 h-32更可靠，适配响应式） -
radial-gradient中的60%必须和圆环粗细匹配；若圆环是 20% 宽，mask 半径就得设为 80%（即透明区 80%，实色区 20%） - 别在父容器上加 padding 或 flex gap，否则会缩放失真，导致 mask 图像偏移
动画降级方案比 transition: --p 更实用
transition: --p 0.4s ease-out 在 Chrome 有效，但 Safari 不支持该语法，且所有基于 background 的 conic-gradient 动画在 Chrome 中都会触发 layout。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 预设几组 class，如
progress-0、progress-25、progress-50，每个对应一组固定角度的conic-gradient - JS 控制 class 切换，避免变量注入和浏览器兼容性问题
- 若必须动态，改用 SVG
<circle></circle>+stroke-dasharray，它天然支持 transition 和 Safari 兼容
环形进度条真正的复杂点不在“怎么画”，而在“怎么让 mask、gradient、容器三者像素级对齐”。哪怕只差 1px，视觉上就会漂移或露白——这点在高 DPR 屏幕（如 MacBook Pro）上尤其明显。
