进度条圆角重叠问题：Chrome/Edge中100%进度时圆角变直角

问题描述 #

我有一个带圆角的进度条，当进度达到100%时，会覆盖背景白色区域的圆角使其变为直角。该问题在Firefox中表现正常，但在Chrome、Edge等webkit内核的现代浏览器中存在。

原代码示例 #

body {
  background: #ccc;
}
#feedProgress {
  width: 200px;
  height: 30px;
  border: none;
  background: #fff;
  appearance: none;
  border-radius: 0.5rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#feedProgress::-webkit-progress-bar {
  background: #fff;
  border-radius: 0.5rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#feedProgress::-webkit-progress-value {
  background: #006DC5;
  border-radius: 0.5rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

<progress id="feedProgress" value="50" max="100"></progress><br><br>

<progress id="feedProgress" value="100" max="100"></progress>

问题原因 #

在webkit内核浏览器中，当::-webkit-progress-value（进度填充部分）的宽度达到100%时，它的圆角样式会覆盖::-webkit-progress-bar（背景部分）的对应圆角。原代码中::-webkit-progress-value设置了border-top-right-radius: 0，导致进度100%时，填充部分的右上直角覆盖了进度条本身的右上圆角。

解决方案 #

通过CSS属性选择器，针对进度值为100%的进度条，调整::-webkit-progress-value的右上圆角，使其与进度条的圆角保持一致：

body {
  background: #ccc;
}
#feedProgress {
  width: 200px;
  height: 30px;
  border: none;
  background: #fff;
  appearance: none;
  border-radius: 0.5rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#feedProgress::-webkit-progress-bar {
  background: #fff;
  border-radius: 0.5rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#feedProgress::-webkit-progress-value {
  background: #006DC5;
  border-radius: 0.5rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* 新增：处理进度100%时的圆角 */
#feedProgress[value="100"]::-webkit-progress-value {
  border-top-right-radius: 0.5rem;
}

效果说明 #

修改后，当进度为50%时，进度填充部分的右上保持直角；当进度达到100%时，填充部分的右上圆角与进度条背景的圆角匹配，不会再出现直角覆盖的问题，同时Firefox的原有正常表现不受影响。

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