如何用纯CSS实现带阴影、可动态扩展分段、内置文字的Donut环形图形

架构老林

2026-10-7

纯CSS实现动态分段环形图方案

完全可以纯CSS实现需求，核心依赖锥形渐变实现分段，支持动态调整分段数量、占比，不需要引入图片资源。

核心实现思路

动态分段：使用conic-gradient锥形渐变定义每个分段的颜色和起止位置，通过CSS变量控制分段占比，新增分段只需更新渐变参数即可
环形空心：使用mask属性裁切出中间空心区域，比双层嵌套边框方案灵活性更高
外阴影效果：使用filter: drop-shadow()添加环形外阴影，不会影响内部空心区域的透明效果
分段分割线：在锥形渐变的分段衔接位置插入1px的透明间隙，即可实现清晰的分段分割效果

完整实现代码

<div class="donut-chart"></div>

.donut-chart {
  /* 基础尺寸配置，可以自行调整 */
  --size: 200px;
  --hole-size: 100px;
  --shadow-color: rgba(0,0,0,0.15);
  --divider-width: 1px;

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  /* 示例分为3段，占比分别是30%、40%、30%，对应颜色蓝、绿、橙 */
  background: conic-gradient(
    #3498db 0 30%,
    transparent calc(30% + var(--divider-width)),
    #2ecc71 calc(30% + var(--divider-width)) 70%,
    transparent calc(70% + var(--divider-width)),
    #f39c12 calc(70% + var(--divider-width)) 100%
  );
  /* 裁切出中间空心 */
  mask: radial-gradient(
    transparent 0 calc(var(--hole-size) / 2),
    #000 calc(var(--hole-size) / 2 + 0.5px) 100%
  );
  -webkit-mask: radial-gradient(
    transparent 0 calc(var(--hole-size) / 2),
    #000 calc(var(--hole-size) / 2 + 0.5px) 100%
  );
  /* 添加外阴影 */
  filter: drop-shadow(0 2px 8px var(--shadow-color));
}