不能直接用 bg-gradient-conic 控制描边进度，因其仅生成静态三色渐变，不解析 css 变量、calc() 或动态角度；需结合 conic-gradient + mask 与 --p 变量在原生 css 中实现，且 transition: --p 在 safari 中不支持，须降级为 class 切换。
为什么不能直接用 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 解析。所谓“Tailwind 实现环形进度条”，本质是用它管尺寸、定位和基础样式，把描边逻辑交还给原生 CSS。
用 conic-gradient + mask 实现可控描边的最小可行结构
核心思路：一个正方形容器，背景用 conic-gradient 填满整圆，再用 mask 裁出环形描边轮廓，进度由 CSS 变量 --p 控制。
- 容器必须是正方形：
aspect-square w-32比w-32 h-32更语义化，且适配响应式 -
mask推荐用radial-gradient(circle, transparent 60%, black 60%)，避免 Safari 中clip-path: inset()的裁剪错位 - 描边粗细靠
background-size和mask的透明/不透明半径比例控制，不是 border - 进度变量写在 style 里：
style="--p: 0.75;"，别用 class 绑定（无法响应）
示例关键 CSS：
progress-ring {
aspect-ratio: 1;
width: 8rem;
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%);
transition: --p 0.4s ease-out;
}
为什么 transition: --p 在 Safari 里会失效
transition: --p 是 Chromium 独占特性，Safari 目前（截至 2026 年）仍不支持对自定义属性的直接过渡。常见现象是进度突变、无动画。降级方案只能是预设 class 切换：
- 定义一组固定进度类：
progress-0、progress-25、progress-50、progress-75、progress-100 - 每个类对应一个硬编码的
background值（不含变量） - JS 更新时用
el.className = 'progress-ring progress-75'替换，靠transition: background动画（注意：Chrome 中会触发 layout，但 Safari 下更稳）
不要试图在 Safari 中强行启用 --p 过渡——它不会生效，也不会报错，只会静默回退到跳变。
描边“漂移”或“切掉一半”的真实原因和修复点
最常遇到的现象不是代码写错，而是 mask 图像没居中，或容器宽高不一致导致缩放失真。关键检查项：
- 确保容器
width和height完全相等（aspect-square必须生效，不能被父级 flex/gap 挤压） -
mask中的radial-gradient必须基于正方形画布；若用了 SVG<mask></mask>，要确认viewBox="0 0 100 100"且preserveAspectRatio="xMidYMid" - 避免在父级加
transform: scale()或zoom，这些会破坏mask像素对齐
描边效果对像素对齐极其敏感，差 1px 就可能让环断开或偏移——这不是 bug，是 mask 渲染机制决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
