如何实现带圆角端点、高亮段带轮廓的CSS环形进度条

你当前使用两段线性渐变拼接的实现方式本身不支持生成端点圆角效果，调整后的可运行代码如下：

完整实现代码 #

.pie {
  display: inline-block;
  margin: .5em;
  width: 8em;
  height: 8em;
  position: relative;
  border-radius: 50%;
  /* 可自定义参数 */
  --ring-width: 0.5em; /* 环形宽度 */
  --progress: 0.83; /* 进度占比，取值0-1 */
  --progress-color: steelblue; /* 高亮进度色 */
  --bg-color: #ddd; /* 底色 */
  --stroke-color: #222; /* 轮廓颜色 */
  /* 锥形渐变生成进度底色 */
  background: conic-gradient(var(--progress-color) calc(var(--progress) * 360deg), var(--bg-color) 0);
  /* mask实现空心环形，兼容非纯白背景场景 */
  -webkit-mask: radial-gradient(transparent calc(100% - var(--ring-width)), #000 calc(100% - var(--ring-width) + 1px));
  mask: radial-gradient(transparent calc(100% - var(--ring-width)), #000 calc(100% - var(--ring-width) + 1px));
}
/* 生成起点圆角 */
.pie::before {
  content: "";
  position: absolute;
  width: var(--ring-width);
  height: var(--ring-width);
  border-radius: 50%;
  background: var(--progress-color);
  left: calc(50% - var(--ring-width) / 2);
  top: 0;
  box-shadow: 0 0 0 1px var(--stroke-color) inset;
}
/* 生成终点圆角 */
.pie::after {
  content: "";
  position: absolute;
  width: var(--ring-width);
  height: var(--ring-width);
  border-radius: 50%;
  background: var(--progress-color);
  left: calc(50% - var(--ring-width) / 2);
  top: 0;
  transform-origin: 50% 4em;
  transform: rotate(calc(var(--progress) * 360deg));
  box-shadow: 0 0 0 1px var(--stroke-color) inset, 0 0 0 1px var(--stroke-color);
}
/* 生成高亮段轮廓 */
.pie .progress-stroke {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(transparent calc(var(--progress) * 360deg), var(--stroke-color) 0);
  -webkit-mask: 
    radial-gradient(transparent calc(100% - var(--ring-width) - 1px), #000 calc(100% - var(--ring-width))),
    radial-gradient(transparent calc(100% - var(--ring-width) + 1px), #000 calc(100% - var(--ring-width) + 2px));
  mask: 
    radial-gradient(transparent calc(100% - var(--ring-width) - 1px), #000 calc(100% - var(--ring-width))),
    radial-gradient(transparent calc(100% - var(--ring-width) + 1px), #000 calc(100% - var(--ring-width) + 2px));
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

<div class="pie p1">
  <div class="progress-stroke"></div>
</div>

实现说明 #

• 用锥形渐变conic-gradient替代原来的两段线性渐变，角度控制更灵活，可适配任意进度占比
• 用CSS mask实现空心环形，比原有白色遮罩覆盖的方案兼容性更好，也支持非纯白背景的使用场景
• 新增两个圆形伪元素分别放在进度的起点和终点，直接实现圆角端点效果
• 所有可调参数都抽成了CSS变量，直接修改对应变量值就可以调整尺寸、颜色、进度占比
• 如果需要兼容不支持CSS mask的低版本浏览器，可以用SVG的<circle>结合stroke-dasharray属性实现，天生支持stroke-linecap: round属性直接生成圆角端点，控制逻辑更简单。

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