Chrome/Edge进度条圆角被填充色覆盖的修复方法

在 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：

#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，进度条始终维持顶部圆角、底部平直的预期形态，跨浏览器表现完全一致。