如何解决进度条在 Chrome/Edge 中圆角被填充色覆盖的问题

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

为解决 chrome 和 edge 浏览器中 `` 元素在 100% 进度时填充色溢出、破坏圆角的问题，只需在 progress 元素上添加 `overflow: hidden`，即可强制裁剪超出边界的渲染内容，确保视觉一致性。

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

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

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