怎样在CSS3中使用conic-gradient制作彩色饼图-css教程-PHP中文网

conic-gradient画饼图需用多层叠加+transparent占位，显式写deg单位，起始角默认0deg（正上方），每色块由重复颜色停靠点实现硬边，容器须宽高相等并设border-radius:50%。

怎样在css3中使用conic-gradient制作彩色饼图

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°）三段饼图：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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
  );