CSS 圆锥渐变：conic-gradient 的应用与性能

---

title: CSS 圆锥渐变：conic-gradient 的应用与性能

keywords:

• conic-gradient
• 进度环
• 饼图
• 图形效果
• 性能

description: 介绍 conic-gradient 的语法与应用场景（进度环、饼图、指示盘），说明色标与角度控制、遮罩与叠加技巧，以及性能与兼容建议。

categories:

• 文章资讯
• 编程技术

---

概述

conic-gradient 以中心为轴按角度渐变，适合实现环形进度、饼图与配色指示。通过色标与角度控制可精确分段与动画。

示例

.ring { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#4ade80 0 72deg, #facc15 72deg 216deg, #f87171 216deg 360deg) }
.progress { background: conic-gradient(#3b82f6 calc(var(--p) * 1deg), #e5e7eb 0) }

工程建议

• 分段与动画：使用自定义属性控制角度；与 transition/@property 配合实现平滑动画。
• 遮罩与叠加：结合 mask/clip-path 形成环形或指示盘。
• 性能与兼容：控制区域与重绘；在旧浏览器回退到 SVG/Canvas 实现。

参考与验证

• MDN 渐变文档：https://developer.mozilla.org/docs/Web/CSS/gradient/conic-gradient
• CSS Images 规范：https://www.w3.org/TR/css-images-4/