Bootstrap 4中.progress-bar的border-radius和background-color直接修改失效，因其原生硬编码border-radius:0.25rem且用linear-gradient覆盖背景；必须用!important显式覆盖.progress-bar的border-radius:0和background-image，并同步调整height、line-height、background-size等。
直接改 border-radius 和 background-color 会失效——Bootstrap 4 的 .progress-bar 默认用 linear-gradient 覆盖背景，且圆角写死在类里，必须覆盖原生规则才能生效。
为什么 border-radius: 0 加了也不直角？
Bootstrap 4 的 .progress-bar 原生样式中硬编码了 border-radius: 0.25rem（即 4px），权重远高于你写的工具类或简单选择器。给外层 .progress 加 rounded-0 更没用，它不参与视觉渲染。
必须显式覆盖内层条的圆角：
-
.progress-bar上直接写border-radius: 0 !important（!important是必要的，否则被原生样式压住） - 若用自定义 class（如
.progress-flat），写成.progress-flat .progress-bar { border-radius: 0 !important; } - 别只设外层容器高度再指望它“撑”出直角——
.progress-bar的圆角是独立控制的
渐变色为什么 background-color 设了也不显示？
因为 Bootstrap 4 默认用 background-image: linear-gradient(to right, #007bff, #0056b3) 渲染进度条，它层级高于 background-color。你在开发者工具里能看到 background-image 非空，而 background-color 虽然存在，但完全被遮住。
立即学习“前端免费学习笔记（深入）”；
正确做法是替换整个背景图：
- 用
background-image: linear-gradient(to right, #4dabf7, #228be6) !important替换默认值 - 至少写两个色标，
linear-gradient(to right, #007bff)是无效语法 - 方向要和动画一致：带
.progress-bar-striped时，to right对应横向条纹；若改to bottom，条纹就变竖向，动画会错位 - 如果同时用
.progress-bar-striped和.progress-bar-animated，必须一起覆盖：.progress-bar-striped, .progress-bar-animated { background-image: ... !important; }
改完圆角和渐变后文字偏上、发虚怎么办？
这不是 bug，是高度、line-height、像素渲染联动的结果。Bootstrap 4 默认 .progress-bar 高度为 1rem（16px），line-height: 1 刚好居中；一旦你调高高度或清掉圆角，文字立刻贴顶或边缘模糊。
必须同步处理：
- 显式设置
height和line-height一致，例如都设为24px - 若用了
.progress-bar-striped，检查background-size是否还是默认的1rem 1rem；新高度下建议设为24px 24px - 加浅灰边框强化轮廓：
border: 1px solid #e9ecef，能有效缓解“发虚”感 - 严禁用
padding挤文字位置——会撑宽元素，破坏百分比宽度逻辑
真正麻烦的不是写法，而是所有改动必须同时作用于 .progress-bar 自身，且多数需 !important 才能压过 Bootstrap 4 原生样式；漏掉 .progress-bar-animated 或 background-size 同步，动画就会卡顿或颜色错位。
