如何用HTML/CSS实现类似Apple Watch的圆角端点环形进度图？

要解决conic-gradient无法生成圆角端点的问题，可以通过伪元素+CSS变换的方式模拟圆角效果，以下是适配你现有代码的完整方案：

核心思路 #

为每个环形进度条添加两个圆形伪元素，分别作为进度段的起始和结束端点，通过rotate()和translate()将伪元素定位到对应角度的环形边缘，伪元素尺寸与进度条厚度一致，实现无缝衔接。

修改后的完整代码 #

CSS 部分 #

body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1c1c1e;
}

.relativo {
  height: 300px;
  position: relative;
  width: 300px;
}

/* 通用进度条样式，加入CSS变量统一控制 */
.progress-bar {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transition: all 2s;
  position: relative;
  /* 计算辅助变量 */
  --radius: calc(var(--size) / 2);
  --thickness: calc(var(--radius) * (1 - var(--inner-percent)));
  --progress-angle: calc(var(--progress) * 3.6deg); /* 1%对应3.6度 */
  --translate: calc(var(--radius) - var(--thickness) / 2);
}

/* 进度条圆角端点伪元素 */
.progress-bar::before,
.progress-bar::after {
  content: '';
  position: absolute;
  width: var(--thickness);
  height: var(--thickness);
  border-radius: 50%;
  background-color: var(--color);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--translate));
}

/* 起始端点：0度位置 */
.progress-bar::before {
  --angle: 0deg;
}

/* 结束端点：对应进度角度 */
.progress-bar::after {
  --angle: var(--progress-angle);
}

/* 第二层进度条定位 */
.progress-bar-two {
  position: absolute;
  top: 20px;
  left: 20px;
}

/* 第三层进度条定位 */
.progress-bar-three {
  position: absolute;
  top: 41px;
  left: 41px;
}

HTML 部分 #

<div class="relativo">
  <!-- 第一层进度：35% -->
  <div class="progress-bar" style="
    --size: 200px;
    --inner-percent: 0.84;
    --progress: 35;
    --color: #ec113b;
    background: radial-gradient(closest-side, #1c1c1e 84%, transparent 85% 100%),
    conic-gradient(var(--color) 35%, #3b191a 0);">
  </div>

  <!-- 第二层进度：10% -->
  <div class="progress-bar progress-bar-two" style="
    --size: 160px;
    --inner-percent: 0.79;
    --progress: 10;
    --color: #3cdd03;
    background: radial-gradient(closest-side, #1c1c1e 79%, transparent 80% 100%),
    conic-gradient(var(--color) 10%, #203919 0);">
  </div>

  <!-- 第三层进度：50% -->
  <div class="progress-bar progress-bar-three" style="
    --size: 118px;
    --inner-percent: 0.72;
    --progress: 50;
    --color: #00c3df;
    background: radial-gradient(closest-side, #1c1c1e 72%, transparent 75% 100%),
    conic-gradient(var(--color) 50%, #17343a 0);">
  </div>
</div>

关键说明 #

1. CSS变量复用：通过--size、--progress、--color等变量统一控制进度条的尺寸、进度值和颜色，后续接入真实数据时只需修改这些变量即可，无需重复调整样式。
2. 端点定位计算：
   • --thickness：根据内部圆形的百分比计算进度条的厚度
   • --progress-angle：将百分比进度转换为角度（一圈360度，1%对应3.6度）
   • --translate：计算伪元素需要向外平移的距离，确保端点刚好落在环形边缘
3. 极端情况处理：如果需要支持0%或100%进度，可通过opacity: 0隐藏对应伪元素（例如进度为0%时隐藏两个伪元素，进度为100%时只保留一个端点）。

内容的提问来源于stack exchange，提问作者Maurício Krüger