核心是用 conic-gradient 配合 --progress 变量实现饼图进度条，background: conic-gradient(#4caf50 calc(var(--progress) 1%), #e0e0e0 calc(var(--progress) 1%))，需设 border-radius: 50%，容器尺寸和字体用 clamp() 适配缩放，数字用 counter-reset 绑定 --progress 实时渲染。
用 conic-gradient + --progress 实现饼图进度条
核心是锥形渐变（conic-gradient）配合 CSS 变量控制角度，而不是靠伪元素旋转或线性渐变拼接。它天然支持 0%–100% 的圆周映射，且无需 JS 计算角度值。
关键写法：background: conic-gradient(#4CAF50 calc(var(--progress) * 1%), #e0e0e0 calc(var(--progress) * 1%))。这里 --progress 是 0–100 的整数，乘以 1% 才能被浏览器识别为有效长度单位——漏掉 * 1% 会导致整个渐变失效，背景退化为纯色。
常见错误现象：进度到 50% 时只显示半圆但边缘发虚、超过 50% 后颜色错乱、动画卡顿或完全不动。
-
--progress必须在 JS 中用el.style.setProperty('--progress', 72)传纯数字（不带 %），CSS 里再统一转单位 - 容器必须设
border-radius: 50%，否则锥形渐变会被裁切成方形 - 别给
background加no-repeat或repeat——conic-gradient默认不平铺，加了反而可能触发渲染异常 - 若需兼容 Safari 15.4 以下或旧 Android WebView，得降级为双半圆遮罩方案（不推荐，维护成本高）
为什么不能直接用 rotate + linear-gradient
有人用伪元素 + rotate(.5turn) 模拟饼图，看似简单，但实际踩坑密集：当进度 > 50%，必须手动切换伪元素背景色，否则会出现“缺口”或重叠；动画过程中角度插值不线性，导致视觉跳变；且无法响应小数精度（如 63.7%）。
更严重的是，transform: rotate() 触发的是合成层重绘，而 conic-gradient 是纯绘制层更新，在多数现代浏览器中帧率更稳。
- 旋转方案在 iOS Safari 上容易因
will-change缺失掉帧，尤其在低端设备上 - 线性渐变 + 旋转组合在缩放页面时会偏移中心点，导致饼图“歪斜”
- 无法用 CSS
transition平滑过渡rotate和background-color两个属性，常需拆成两个动画并同步 timing，极易失步
让中间数字随进度实时更新
环形进度条中间的数字不能靠 JS 插入文本——那样会破坏语义、影响可访问性，也增加 DOM 操作开销。正确做法是用 CSS 计数器 + counter-reset 绑定变量。
示例：counter-reset: num var(--progress) 配合 ::after { content: counter(num) }，就能把 --progress 值直接渲染为文本。注意：该方法仅支持整数，若需保留一位小数，JS 得先四舍五入再 setProperty。
- 不要用
content: attr(style)解析内联样式——不可靠，且无法触发计数器更新 - 若进度值来自 API 返回的小数（如
67.38），JS 端应处理为Math.round(progress)或progress.toFixed(0)后再赋值 - 该计数器方案在 Firefox 90+、Chrome 88+、Safari 15.4+ 均稳定，IE 完全不支持，无降级路径
移动端和缩放场景下的自适应要点
所谓“自适应”，不只是响应视口宽度，更要扛住用户缩放（Ctrl + / Cmd +）、字体放大、深色模式切换等真实操作。锥形渐变本身是矢量绘制，天生抗缩放，但容器尺寸、文字大小、边框粗细仍需主动适配。
重点不是写死 width: 150px，而是用相对单位 + 最小约束：width: clamp(80px, 25vw, 180px)，同时确保 font-size 也用 clamp() 或 rem。
- 避免用
padding控制环形粗细——它会随缩放非线性变化；改用border-width或伪元素box-shadow模拟描边 - 深色模式下，底色（
#e0e0e0）要改用color-scheme: light dark+@media (prefers-color-scheme: dark)覆盖 - 如果父容器用了
transform: scale()，务必在进度条上加transform: scale(1)抵消，否则锥形渐变角度会被扭曲
真正难的不是画出一个 60% 的饼图，而是让它在 Chrome 132、Safari 18、Firefox 129 下表现一致，缩放到 175% 时不糊、不移位、不丢帧。这些细节没被显式写进规范，但决定了用户是否觉得“这个进度条很顺”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
