conic-gradient必须显式指定角度单位（deg或turn）并定义每个扇区结束角，起始角默认0deg（正上方），需配合border-radius:50%和等宽高容器才能形成标准饼图，否则会拉伸变形。
conic-gradient 基础写法和角度单位必须用 deg 或 turn
直接写 conic-gradient(red, blue) 会失败——浏览器默认从 0deg 开始顺时针渐变，但不指定起始角或色标位置时，渲染结果常不符合饼图预期。关键点是：必须显式定义每个扇区的结束角度，且单位不能省略（90 不行，90deg 或 0.25turn 才有效）。
- 色标必须按顺时针顺序排列，例如
conic-gradient(#f00 0deg, #0f0 120deg, #00f 240deg, #f00 360deg) - 起始角默认是
0deg（正上方），不是 CSS 传统 0deg 在右侧的linear-gradient；想让红色从右侧开始？加from 90deg - 重复使用同一颜色做分隔点，才能形成清晰边界，比如
#f00 120deg, #f00 120deg可强制硬切
用伪元素 + border-radius 实现真正圆形遮罩
conic-gradient 本身生成的是方形渐变图像，直接设为 background 会拉伸变形。要得到标准饼图，必须配合 border-radius: 50% 和容器尺寸约束，否则边缘发虚或出现直角残留。
- 容器宽高必须相等，且设
border-radius: 50%；只靠background: conic-gradient(...)不够 - 推荐用伪元素
::before单独承载渐变，主元素负责裁剪，避免内容干扰背景渲染 - 若需透明背景，别用
background-color覆盖，而应设background: conic-gradient(...) / cover并确保父容器无其他背景干扰
动态更新扇区比例时，避免重绘抖动
用 JS 修改 style.background 字符串拼接 conic-gradient 是最常见做法，但频繁触发 layout 或 paint 会导致卡顿。尤其在动画或实时数据场景下，角度计算稍有误差就会出现扇区间隙或重叠。
- 每次更新前先算好累计角度，用
Math.round()避免浮点误差累积（如120.00000000000001deg） - 不要逐个修改色标，而是重新生成整个
conic-gradient字符串；CSS 不支持部分更新 - 若扇区数多于 8 个，考虑改用 SVG
<path></path>或 Canvas，CSS 渐变性能会明显下降
IE 和 Safari 16.4 之前版本根本不支持 conic-gradient
没加前缀的 conic-gradient 在 Safari ≤16.3、所有 IE 版本、旧版 Android WebView 中直接失效，回退成纯色或空白。不能只靠 @supports 检测——有些浏览器声称支持却存在角度偏移 bug。
立即学习“前端免费学习笔记（深入）”；
- 必须提供降级方案：用
background: #ccc或 SVG fallback 图片 - Safari 16.4+ 才修复了
from关键字解析问题，此前版本即使加-webkit-conic-gradient也无效 - 构建工具里 autoprefixer 不会为
conic-gradient加前缀，它只处理已废弃的旧语法，这点容易被忽略
border-radius: 50% 和等宽高，就不是饼图。 
