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

Chrome 与 Edge 中 progress 元素圆角溢出的修复方法

在 Chrome 和 Edge 浏览器中， 元素在 100% 进度时填充色溢出、破坏圆角的问题，其实解决起来非常简洁——只需在 progress 元素上添加 overflow: hidden，就能强制裁剪超出边界的渲染内容，确保视觉一致性。

问题成因：替换元素的浏览器差异

为什么会出现这种情况？这要归因于 在现代 CSS 中是一个“替换元素”（replaced element），其内部渲染机制因浏览器而异。Firefox 默认对 ::-moz-progress-bar 的绘制做了更严格的边界控制，而 WebKit/Blink 内核（Chrome、Edge、Safari）的 ::-webkit-progress-value 在满值时可能略微超出容器边界，导致白色背景（::-webkit-progress-bar）的圆角被深色填充块覆盖，视觉上呈现“方角假象”。

核心解决方案：overflow: hidden

核心解决方案非常直接——在 元素本身设置 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; /*  关键修复：裁剪子元素溢出 */
}

这条声明会将 ::-webkit-progress-bar 和 ::-webkit-progress-value 视为内部内容，并依据 border-radius 自动创建裁剪区域（clipping path），这样一来，即使 value="100"，蓝色填充块也不会突破右上/右下圆角边界。

实施注意事项

• overflow: hidden 对 元素有效，但需确保其父容器未设置 overflow: visible 干扰继承；
• 不要对伪元素（如 ::-webkit-progress-value）单独设 overflow，它不生效；
• 若使用自定义 SVG 或 div 模拟进度条，此问题不存在，但原生 的语义与可访问性优势仍值得保留；
• Safari 同样依赖 WebKit 渲染，因此该修复对其同样适用。

最终效果：跨浏览器一致

最终效果：无论 value 是 50 还是 100，进度条始终维持顶部圆角、底部平直的预期形态，跨浏览器表现完全一致。