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