CSS3 词条目录
前端Wiki/词条/conic-gradient 锥形渐变

conic-gradient 锥形渐变

定义围绕中心点旋转过渡颜色的渐变,天然适合做饼图、环形进度条与色相轮

linear-gradient 沿直线过渡,radial-gradient 从中心向外辐射,conic-gradient 则是绕中心点「顺时针扫过」过渡。语法 conic-gradient(red 0deg, blue 120deg, green 240deg, red 360deg),颜色后面跟的是角度。

实战价值极高:一个 conic-gradient 就能画饼图(硬色阶用 to 关键字)、配合 mask 或双层 div 镂空中心就能画环形图,配合 animation 旋转角度就是加载 spinner——完全不需要 SVG 或 canvas。

HTML
<style>
  .pie { width: 130px; height: 130px; border-radius: 50%;
         background: conic-gradient(#4a9eff 0deg 120deg,
                                   #f778ba 120deg 240deg,
                                   #39c5cf 240deg 360deg); }
</style>
<div class="pie"></div>
⚠ 常见误区
🔗 相关词条线性渐变径向渐变
← 返回来源章节径向渐变