conic-gradient做圆形进度条需三处校准：角度用calc(var(--p)*3.6deg)换算，起点加from -90deg对齐顶部，空心靠padding+background-clip:content-box实现。
用 conic-gradient 做圆形进度条，现代浏览器下一行 CSS 就能跑通，但直接抄代码大概率出错——核心卡点不在语法，而在角度计算、空心实现和起点对齐这三处。
conic-gradient 的角度怎么算才不翻车
百分比必须转成度数，且 1% = 3.6°。写成 calc(var(--p) * 3.6deg) 最稳，别用 var(--p)% 或 var(--p)deg，那会把 75 解析成 75deg 而不是 270deg。
-
conic-gradient(#4a90e2 0deg, #4a90e2 calc(var(--p) * 3.6deg), transparent 0)是标准写法：第二色标动态结束，第三色标从 0 开始透明，避免硬边 - 如果进度是 0，
calc(0 * 3.6deg)得 0deg，整个环变透明——这是预期行为，不是 bug - 想支持超 100%（比如 110%），得加
clamp(0, var(--p), 100)或用 JS 校验，CSS 不拦截越界值
为什么看着像实心饼，不是环
因为 conic-gradient 默认铺满整个元素背景区域，包括中心。要“空心”，必须限制它只画在环形区域。
- 最轻量做法：设
padding: 12px（即环宽），再加background-clip: content-box，让渐变只渲染在 padding 区 - 必须配
border-radius: 50%和固定宽高（如width: 120px; height: 120px），否则不是正圆，渐变会拉伸 - 不加
background-clip时默认是border-box，中心白点盖不住，就成实心扇形
进度条总从右边开始转，怎么调到顶部
conic-gradient 默认 0deg 在正右方，但进度条习惯从正上方（12 点钟方向）开始。得用 from 显式校正。
- 写成
conic-gradient(from -90deg, ...)或conic-gradient(from calc(0.25turn - var(--p) * 1turn), ...)才能让起点落在顶部 - 别信“0deg 就是顶部”——那是 SVG 或 canvas 的惯例，CSS
conic-gradient的 0deg 永远是右侧 - 如果用了
from -90deg还偏移，检查是否漏了background-size: 200% 200%，否则background-position动画会失效或跳帧
动画卡顿或不动，该调哪几个参数
想让环匀速旋转（比如加载中效果），不能直接 rotate 元素，得拖动渐变起点。但这有硬性依赖。
- 必须设
background-size: 200% 200%，否则background-position移动无效 - 关键帧写成
from { background-position: 0 0; } to { background-position: 360px 0; }，才能转一整圈 - Safari 15.x 和部分安卓 WebView 旧版不支持该组合，会静止或跳帧——不是你代码错，是浏览器没实现，得 fallback 到 SVG
真正容易被忽略的是：所有这些技巧都建立在容器为正方形、mask/clip-path 居中、渐变尺寸与容器严格匹配的前提下。差一个像素，环就偏；少一个声明，中心就填满；没校准起点，用户第一眼就觉得“转歪了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
