不能直接给.progress加rounded-0，必须作用于.progress-bar并显式设置border-radius: 0，否则圆角无效；同步调整height和边框可避免视觉发虚或变细。
Progress进度条圆角改直角用 rounded-0 吗？
不能直接加 rounded-0。Bootstrap 的 .progress 和 .progress-bar 是两层结构，rounded-0 只作用于单个元素的 border-radius，而进度条的圆角来自 .progress-bar 自身的默认样式（border-radius: 0.375rem），不是靠外层容器继承来的。
常见错误是给 .progress 加 rounded-0，结果毫无变化——因为圆角在内部条上，外层没圆角可清。
- 必须显式作用于
.progress-bar类，或其对应选择器 -
rounded-0对.progress-bar有效，但需确保它被正确应用（比如写在 class 里，且没被更高优先级规则覆盖） - 如果用了自定义颜色类（如
bg-success），它们不带圆角控制逻辑，不影响结果
怎么安全地把 .progress-bar 圆角设为直角？
最稳妥的方式是用 CSS 覆盖 .progress-bar 的 border-radius，而不是依赖工具类组合。因为：
-
.progress-bar在 Bootstrap 5 中没有响应式圆角类（不像按钮有rounded-lg） - 即使加了
rounded-0，若项目里有其他样式（比如主题、重置 CSS）插手，仍可能被覆盖 - 直接写
border-radius: 0更明确、更可控
推荐写法（Sass 或 CSS 文件中）：
.progress-bar {
border-radius: 0;
}
如果只改个别进度条，可用内联 style 或自定义 class：
<div class="progress"> <div class="progress-bar bg-primary" style="width: 60%; border-radius: 0;"></div> </div>
为什么改完圆角后进度条看起来“变细”或“颜色发虚”？
这不是错觉，而是高度和圆角联动导致的视觉干扰。当 border-radius 从 0.375rem 改成 0，如果同时没同步调整 height，就会暴露两个问题：
-
.progress-bar默认高度依赖父容器，但它的渲染会因圆角移除而轻微收缩（尤其在某些浏览器下） - 圆角消失后，边缘像素过渡变硬，若背景色对比弱，容易显得“发虚”或“模糊”
- 如果之前靠圆角“撑”出了视觉厚度，直角会让整体显得更单薄
解决方法：要么同步加大 height（比如设为 24px），要么加一层浅色边框（border: 1px solid #e9ecef）来强化轮廓。
多个进度条混用时圆角不一致怎么办？
检查是否混用了不同版本的 Bootstrap 样式，或者有第三方组件注入了自己的 .progress-bar 规则。特别注意：
- 某些 UI 库（如 AdminLTE、CoreUI）会重写
.progress-bar，覆盖原始圆角值 - 如果用了
progress-striped或progress-animated，它们的动画背景图（background-image）可能自带圆角裁剪逻辑，需一并检查background-size和background-position - RTL 模式下，部分老版本 Bootstrap 的
.progress-bar会额外加border-start-radius/border-end-radius，直角需分别清除
最保险的做法：在项目入口 CSS 最底部加一条强制规则，带 !important（仅限此场景）：
.progress-bar {
border-radius: 0 !important;
}
复杂点在于，圆角只是表象；真正影响一致性的，往往是高度、背景图缩放、以及父容器的 overflow 隐藏策略——这些都得一起调。
