如何用HTML和CSS为饼图添加内边框

基于你现有的代码，只需调整radial-gradient的参数就能实现目标效果。核心是通过径向渐变创建中间空心区域，同时在空心外侧保留一圈白色内边框，让下方的锥形渐变（饼图分段）仅显示在边框外侧的环形区域。

修改后的完整代码 #

HTML

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

CSS

.pie-chart {
  margin-left: 10px;
  --size: 8rem;
  --fg: #369;
  --bg: #def;
  --border-width: 2px; /* 可自定义内边框宽度 */
  --inner-radius: 40%; /* 可自定义空心区域半径比例 */
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    /* 径向渐变：构建空心+白色内边框 */
    radial-gradient(
      closest-side,
      transparent calc(var(--inner-radius) - var(--border-width)),
      white var(--inner-radius),
      white calc(var(--inner-radius) + var(--border-width)),
      transparent calc(var(--inner-radius) + var(--border-width) + 1px)
    ),
    /* 原饼图分段的锥形渐变 */
    conic-gradient(
      #301B84 0 45%,
      #715fa5 45% 65%,
      #aca6cd 65% 75%,
      #d6d0e4 75% 100%
    );
  color: var(--fg);
}

关键调整说明 #

• 新增--border-width和--inner-radius变量，方便你灵活调整内边框粗细和空心区域大小。
• 径向渐变的四层颜色逻辑：
  1. 从中心到内边框内侧为透明，露出底层背景
  2. 内边框范围（--inner-radius ± --border-width）显示白色
  3. 内边框外侧到饼图边缘恢复透明，让下方的锥形渐变完整显示

内容的提问来源于stack exchange，提问作者Sushant