conic-gradient画饼图需用多层叠加+transparent占位，显式写deg单位，起始角默认0deg（正上方），每色块由重复颜色停靠点实现硬边，容器须宽高相等并设border-radius:50%。
conic-gradient 基础语法和颜色停靠点怎么写
直接用 conic-gradient 画饼图，核心是控制角度范围和颜色过渡位置。它不像 linear-gradient 沿直线渐变，也不像 radial-gradient 从中心发散，而是按圆周方向（0° 到 360°）顺时针渐变。
关键点：每个色块由两个相邻颜色停靠点定义，比如 conic-gradient(red 0deg, red 90deg, blue 90deg, blue 180deg) 就是左上红、右上蓝的半圆效果。注意——90deg 出现两次，这是实现“硬边”（无过渡）的必需写法。
- 起始角默认是 0deg（正上方），不是 CSS 传统 X 轴方向的 0deg（正右方）
- 角度单位必须显式写
deg，turn或rad也行，但混用易出错 - 不写起始角度时，浏览器会自动补
from 0deg，但建议显式写出，避免在 Safari 中行为不一致
用多个 conic-gradient 叠加模拟多段饼图
单个 conic-gradient 只能画一个连续渐变环，真饼图需要多段独立色块。主流做法是用多个 conic-gradient 作为 background-image 层叠，每层只显示对应角度区间，其余裁掉。
技巧在于：每层用 transparent 占位，只留一段实色。例如画 30%（108°）、40%（144°）、30%（108°）三段饼图：
立即学习“前端免费学习笔记（深入）”；
background-image:
conic-gradient(
#ff6b6b 0deg, #ff6b6b 108deg,
transparent 108deg, transparent 360deg
),
conic-gradient(
#4ecdc4 0deg, #4ecdc4 108deg,
#4ecdc4 252deg, #4ecdc4 252deg,
transparent 252deg, transparent 360deg
),
conic-gradient(
#ffe66d 0deg, #ffe66d 252deg,
#ffe66d 360deg, #ffe66d 360deg
);
- 每层都从 0deg 开始，靠
transparent隐藏不需要的部分 - 第二层起始要“跳过”第一层角度，所以第二个
conic-gradient的实色区间是 108deg → 252deg（108+144） - 叠加顺序反着来（最后一段写在最前面），否则会被上层盖住
为什么不能直接用 background-size + clip-path 简化
有人想用 background-size: 200% 200% 配合 clip-path: polygon() 截出扇形，理论上可行，但实际踩坑多：
-
clip-path对conic-gradient的裁剪在 Firefox 和 Safari 中支持不稳定，常出现边缘锯齿或裁剪失效 -
background-size缩放会扭曲角度计算，尤其当容器非正方形时，0deg 方向偏移不可控 - 动态更新某一段占比时，需重算所有
clip-path顶点坐标，不如纯 CSS 渐变参数直观
结论：坚持用多层 conic-gradient + transparent 占位，兼容性和可维护性更好。
响应式和动画支持要注意什么
conic-gradient 本身支持 CSS 动画，但仅限颜色值（如 #f00 → #00f），角度值（90deg）无法直接动画——浏览器不支持对角度数字做插值。
- 要做“增长动画”，得用
@property（Chrome 103+ / Safari 16.4+）注册自定义角度变量，再绑定到渐变中 - 降级方案：用
transform: rotate()配合overflow: hidden容器，旋转一个满色圆盘，露出部分角度，更兼容但逻辑稍绕 - 响应式下，确保容器宽高相等（
aspect-ratio: 1或padding-bottom: 100%），否则饼图会被拉成椭圆
真正麻烦的是 IE 和旧版 Safari —— 它们根本不认 conic-gradient。如果项目还需兼容，别硬上，老实用 SVG 或 Canvas。
