如何修复Chrome/Edge进度条圆角被填充色溢出覆盖

要解决现代浏览器（Chrome、Edge）中 progress 元素在 100% 进度时内填充色溢出、破坏外层圆角的问题，只需为其添加 overflow: hidden，即可强制裁剪超出边界的渲染内容，确保视觉一致性。

在使用 元素进行自定义样式设计时，许多开发者会通过 ::-webkit-progress-bar 和 ::-webkit-progress-value 两个伪元素精细控制外观。然而，一个容易被忽略的细节是：当进度值达到 100% 时，Chrome 和 Edge 会将进度条内部的填充色渲染到容器边界之外，直接覆盖父容器（即 元素本身）设置的 border-radius，导致右端圆角“变方”。相比之下，Firefox 表现规范，始终正确遵循圆角裁剪逻辑。

这一现象的根本原因在于 元素属于“替换元素”。不同浏览器引擎对内部伪元素的渲染策略存在差异：Webkit/Blink 引擎默认不会自动裁剪子内容以适配父容器的圆角，除非开发者明确声明裁剪行为。

解决方案

直接为 元素添加 overflow: hidden 即可解决：

#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;
  /* 关键修复：启用裁剪 */
  overflow: hidden;
}

注意事项

• overflow: hidden 对 元素完全安全，不会影响可访问性——ARIA 属性、键盘导航、屏幕阅读器均能正常工作。
• 该声明只作用于元素自身的盒模型，不会影响 ::-webkit-progress-bar 和 ::-webkit-progress-value 的样式继承，可放心使用。
• Firefox 无需额外处理，它原生支持圆角裁剪。但建议保留标准 border-radius 以维持跨浏览器一致性。
• 若仍需支持 IE（尽管已基本被淘汰），则需改用
  模拟进度条。在现代项目中，该顾虑可忽略。

  最终效果

  无论 value="50" 还是 value="100"，进度条两端均严格保持 0.5rem 圆角，底部左侧和右侧的直角也按设计保留。跨浏览器视觉完全统一，体验更佳。