如何让小宽度进度条的border-radius效果与大宽度进度条一致

问题根源 #

你遇到的小比例下圆角变形是CSS的默认渲染规则：当元素宽度小于border-radius值的2倍时，圆角会被自动等比压缩。你的进度条border-radius设为8px，最少需要16px宽度才能展示完整圆角，而1%进度对应的实际宽度仅2px，远小于要求值，因此出现异常。

最优解决方案 #

不需要修改原有DOM结构，改用clip-path裁剪替代动态修改宽度，即可完美解决问题，同时兼容你现有的ghost半透明进度条逻辑：
原理是进度条元素始终保持100%宽度，保证圆角可以正常渲染，仅通过裁剪隐藏超出进度比例的部分。

代码修改步骤

1. 调整.progress-bar的CSS规则：

.progress-bar {
  --progress: 0%;
  position: absolute;
  /* 固定宽度为100%，不再动态修改 */
  width: 100%;
  height: 17px;
  border: 0 solid white;
  border-radius: 8px;
  /* 通过CSS变量控制裁剪范围，自动保留圆角 */
  clip-path: inset(0 calc(100% - var(--progress)) 0 0 round 8px);
}

2. 替换原有动态宽度的内联样式：
   原来的style="width: xx%"直接替换为style="--progress: xx%"即可，示例如下：

<!-- 原写法 -->
<div class="progress-bar bg-blue" style="width: 1%"></div>
<!-- 新写法 -->
<div class="progress-bar bg-blue" style="--progress: 1%"></div>

方案优势

• 逻辑简单，仅需修改少量CSS，不需要额外DOM嵌套
• 任意进度比例下圆角表现完全一致，0%到100%全区间无异常
• 完全兼容ghost进度条的半透明逻辑，不需要额外适配
• 浏览器兼容性好，所有主流现代浏览器都支持该语法

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