conic-gradient画环形进度条的核心原理是用360°圆锥渐变，以from -90deg将起点设在顶部，通过calc(var(--p)*3.6deg)动态计算角度，配合border-radius:50%、明确宽高及background-clip等实现。
conic-gradient 画环形进度条的核心原理
浏览器原生支持 conic-gradient 后，环形进度条终于不用靠 JS 或 SVG 拼凑了。它的本质是：用一个 360° 的圆锥渐变，把「已完成」部分用实色覆盖，「未完成」部分透明或留白，再配合 background-clip: text 或遮罩层控制可见区域。
关键点在于角度计算必须严格对应百分比：1% = 3.6°，且起始角默认是 0°（正上方），不是 CSS 常见的 0° 在右侧。容易错把 from 0deg 当成从右开始，结果进度条转歪了。
-
conic-gradient(from 0deg, #4a9eff 0%, #4a9eff 72%, transparent 72%)表示 20% 进度（72° / 360°） - 必须设
border-radius: 50%让容器成圆，否则渐变会拉伸变形 - 推荐用
background-size: 200% 200%配合background-position微调对齐，避免边缘像素模糊
纯 CSS 实现时如何动态更新进度值
不能直接在 CSS 里写变量算角度，得靠 CSS 自定义属性 + calc() 配合 HTML 的 style 内联设置。JS 只需改一个属性，CSS 自动响应，不触发重排。
比如给元素设 style="--p: 65"，CSS 里写：background: conic-gradient(from -90deg, #4a9eff 0%, #4a9eff calc(var(--p) * 3.6%), transparent calc(var(--p) * 3.6%))。注意这里用了 from -90deg 把 0% 起点挪到最顶部，更符合直觉。
立即学习“前端免费学习笔记（深入）”；
- 务必加
-90deg偏移，否则 0% 从正右方开始，视觉上像“缺了一块” -
calc()里不能写%单位，var(--p) * 3.6输出的是纯数字（如 126），单位由 gradient 自动理解为 deg - IE 和旧版 Safari 不支持
conic-gradient，可用@supports (background: conic-gradient())做降级
常见错误：进度条显示为空白或半截圆
八成是因为背景被盖住了，或者尺寸没撑开。环形进度条本质是背景图，不是内容流元素，没有高度宽度就什么也看不到。
- 容器必须有明确的
width和height（比如120px），且两者相等 - 别忘了
background-color: transparent，否则底色会盖掉渐变 - 如果用了
background-clip: text，要加-webkit-text-fill-color: transparent，且元素得有文字内容（哪怕 - 检查是否误用了
linear-gradient或radial-gradient—— 错一个字就完全不像环
移动端适配和性能注意点
在 iPhone 上测试时发现，某些 iOS 版本对 conic-gradient 的抗锯齿处理较弱，边缘容易发虚。这不是 bug，是渲染策略差异。
- 避免用过细的环（
width: 6px以下），建议最小 8px，保证清晰度 - 动画用
transition: background 0.3s ease即可，不要用animation驱动角度变化——CSS 无法高效插值角度变量 - 真需要顺滑动画？改用
transform: rotate()配合遮罩层，但复杂度翻倍，新手慎入
真正卡住人的往往不是语法，而是忘记 from -90deg 和容器没设宽高——这两个点反复踩过三次以上才记住。
