CSS conic-gradient 实战：饼图、进度环、色轮与棋盘格

为什么值得关注 conic-gradient

linear-gradient 和 radial-gradient 大家都很熟，conic-gradient（锥形渐变）用得少，但它沿圆心按角度铺色，正好适合饼图、色轮、进度环这类「按角度分区」的图形。所有现代浏览器都已支持，不需要 canvas 或 SVG。

1. 纯 CSS 饼图

色标给出起止角度（或百分比），相邻色标位置相同就形成硬边：

.pie {
  width: 160px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(#6366f1 0 40%, #ec4899 40% 70%, #f59e0b 70% 100%);
}

数据变化时只改百分比。如果数据来自 JS，可以用 CSS 变量：conic-gradient(#6366f1 0 calc(var(--p) * 1%), #e5e7eb 0)，第二个色标写 0 表示「接着上一个位置」。

2. 进度环

在饼图上叠一个 mask 挖空中心即可，不需要额外元素：

.ring {
  --p: 72;
  width: 120px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(#22c55e calc(var(--p) * 1%), #e5e7eb 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
}

12px 就是环的粗细；两个位置差 1px 是为了让边缘抗锯齿。

3. 色轮

.wheel {
  width: 200px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(in hsl longer hue, red 0 0);
}

in hsl longer hue 是 CSS Color 4 的插值语法，让颜色沿色相走完整一圈。不支持该语法的旧浏览器可以退回写法：conic-gradient(red, yellow, lime, aqua, blue, magenta, red)。

4. 棋盘格背景

.checker {
  background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 20px 20px;
}

常用作透明图片预览的底纹，比切图省事，尺寸也能随意调。

5. 起始角度和圆心

conic-gradient(from 90deg at 30% 50%, ...)：from 控制起点角度（默认 0deg 指向正上方，顺时针），at 控制圆心位置。做仪表盘时常用 from -120deg 配合 240deg 的有效区间。

注意事项

• 硬边在高 DPI 屏上可能有细微锯齿，可以把相邻色标错开 0.5deg 缓解。
• 饼图的可访问性：纯背景对读屏软件不可见，记得给元素加 role="img" 和描述数据的 aria-label。
• 动画角度要用 @property 注册 --p 为 <number>，否则 CSS 变量无法过渡。

以上代码都可以直接粘到浏览器里试，改改色标就能用到自己的项目中。