conic-gradient绘制饼图需注意角度基准（0deg在正右）、兼容性限制（ie/旧safari不支持）、动态更新应使用css自定义属性而非拼接字符串、交互叠加需额外定位避免错位。
conic-gradient 绘制饼图时角度计算容易错
锥形渐变不是从中心向外辐射，而是绕圆心顺时针旋转着色——这意味着 0deg 在正右方向（3 点钟），不是正上（12 点钟）。直接套用数学角度或 SVG 的 transform: rotate() 习惯会画歪。
- 饼图每一块起始角 = 前面所有块占比之和 × 360deg；结束角 = 起始角 + 当前块占比 × 360deg
- 必须用
conic-gradient(from 0deg, ...)显式指定起点，否则浏览器默认从 0deg（正右）开始，第一块永远从右边冒出来 - 如果数据是 [30%, 40%, 30%]，对应角度段应为：
conic-gradient(from 0deg, #f00 0deg 108deg, #0f0 108deg 252deg, #00f 252deg 360deg) - 百分比值不能写成小数（如 0.3），必须转成 deg，且各段端点必须严格衔接，否则出现细缝或重叠
IE 和旧版 Safari 不支持 conic-gradient，别硬扛
conic-gradient 在 Chrome 69+、Firefox 63+、Safari 12.1+ 才稳定可用。iOS 12.2 之前、所有 IE 版本、部分安卓 WebView（如 UC 内核）直接忽略该声明，回退成纯色或空白。
- 不能只靠
@supports (background: conic-gradient(...))做判断——某些旧 Safari 会识别语法但渲染异常（比如角度偏移） - 真要兼容，得用 SVG 或 Canvas 绘制饼图，CSS 方案只能作为现代浏览器的增强层
- 用 PostCSS 插件（如
postcss-conic-gradient）无法 polyfill，它只是语法转换，不解决底层缺失
动态更新 conic-gradient 饼图时不要直接改 background 字符串
每次重绘都拼接一长串 conic-gradient(...) 字符串并赋值给 element.style.background，性能差且易出错——尤其是角度计算涉及浮点数时，微小误差会累积导致视觉断层。
- 用 CSS 自定义属性控制角度更稳妥：
style="--start: 0deg; --end: 108deg;"，然后在 CSS 中写background: conic-gradient(from var(--start), #f00 0deg var(--end), ...) - 角度值建议统一用整数 deg，避免
107.999999999deg这类浮点残留（可用Math.round(angle * 100) / 100截断） - 若需动画过渡，
conic-gradient本身不支持transition，得用transform: rotate()配合遮罩，或改用@property（仅 Chromium 支持）
饼图标签和交互叠加在 conic-gradient 上容易错位
锥形渐变是纯背景，没有 DOM 结构，所有文字标签、点击区域、悬停提示都得额外定位。一旦容器缩放、响应式变化或用了 transform，坐标系就容易脱节。
立即学习“前端免费学习笔记（深入）”；
- 别用
position: absolute+ 百分比 top/left 模拟扇形中心——实际扇形顶点在元素中心，但文本锚点未必对齐 - 推荐用
radial-gradient或透明 SVG 作辅助层，把每个扇形区域映射为独立<path></path>，再绑定事件 - 悬停高亮某一块时，不能只改背景色——得重新生成整个
conic-gradient字符串，把目标段颜色替换掉，其余保持原样
事情说清了就结束。锥形渐变画饼图看着简洁，但角度基准、兼容边界、动态更新、交互对齐这四点，任一没控住就会在某个机型或数据组合下露馅。
