conic-gradient 是唯一能用纯 CSS 按角度绘制扇形的原生方案，但需注意：角度从 0deg（3 点钟方向）顺时针计算，须显式写 from 0deg；各段端点必须严格衔接；动态更新宜用 CSS 自定义属性配合 calc()；兼容性差，旧 Safari/IE 不支持；文字与交互区域需额外定位。
conic-gradient 本身不是“适合”做饼图，而是唯一能用纯 CSS 把角度映射到扇形的原生方案——其他渐变类型做不到按度数切分圆周。
conic-gradient 的角度计算必须从 0deg 开始顺时针累加
0deg 不在顶部（12 点钟），而在正右方向（3 点钟）。这是最容易画歪的第一步。
- 数据
[30%, 40%, 30%]对应的角度段是：0deg → 108deg、108deg → 252deg、252deg → 360deg - 每一段的起始角 = 前面所有块占比之和 × 360；结束角 = 起始角 + 当前块占比 × 360
- 各段端点必须严格衔接，比如
red 0deg 108deg, yellow 108deg 252deg，不能写成107.999deg或108.001deg，否则出现细缝或重叠
必须显式写 from 0deg，否则第一块永远从右边冒出来
浏览器默认起点就是 0deg，但很多人误以为它会自动对齐顶部。不加 from 看不出问题；一旦你加了 from 90deg 想“转正”，反而会让整个饼图偏移 90 度。
- 正确写法：
conic-gradient(from 0deg, #f00 0deg 108deg, #0f0 108deg 252deg) - 错误直觉：
from 90deg试图让第一块从顶部开始——结果第一块出现在左边（6 点钟） - 如果真要顶部对齐，得用
transform: rotate(-90deg)配合容器，而不是改from
动态更新时别拼字符串，用 CSS 自定义属性 + calc()
每次 setData 都重新生成一长串 conic-gradient() 并赋值给 style.background，不仅性能差，浮点误差还会导致视觉断层。
立即学习“前端免费学习笔记（深入）”；
- 推荐方式：JS 只更新变量，如
el.style.setProperty('--start-1', '0deg');、--end-1等 - CSS 中写：
background: conic-gradient(from var(--start-1), #f00 0deg var(--end-1), ...) - 角度值统一用整数：
Math.round(percent * 360)，避免107.999999999deg
IE 和旧 Safari 直接忽略 conic-gradient，且无法靠 @supports 完全兜底
Chrome 69+、Firefox 63+、Safari 12.1+ 支持稳定；iOS 12.2 之前、所有 IE、多数安卓 WebView（如 UC）不支持或渲染异常。
-
@supports (background: conic-gradient())在某些旧 Safari 上会返回true，但实际渲染错位 - PostCSS 插件（如
postcss-conic-gradient）只是语法转换，不补底层能力 - 真要兼容，得用 SVG 或 Canvas 绘制主图，
conic-gradient仅作为现代浏览器的增强层
最常被忽略的其实是坐标系脱节问题：锥形渐变是纯背景，没有 DOM 结构，所有文字标签、点击区域、悬停提示都得额外定位。一旦容器用了 transform 或响应式缩放，就容易错位——这点比兼容性更难调试。
