直接修改 .progress-bar 的 background-color 最有效，因 Bootstrap 4 进度条填充色由该类控制，而非父容器 .progress；改 .progress 无效。
直接修改 .progress-bar 的 background-color 最有效
Bootstrap 4 的进度条填充色默认由 .progress-bar 类的 background-color 控制，而不是父容器 .progress。很多初学者误改 .progress 的背景，结果毫无反应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用类选择器覆盖，例如：
.progress-bar.custom-success { background-color: #28a745; } - 如果使用 SCSS，可重定义
$success等变量后重新编译，但见效慢、维护成本高 - 避免用
!important——Bootstrap 4 的 CSS 权重已足够高，只需确保你的样式表在 Bootstrap 之后加载即可
用 background-image 实现渐变填充（如蓝色到绿色）
单纯改 background-color 只能实现单色，若需渐变效果，必须替换 background-image，因为 Bootstrap 4 默认用它画条纹（repeating-linear-gradient）来模拟动画感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先清除默认条纹：设置
background-image: none - 再叠加渐变：
.progress-bar.gradient-fill { background-image: none; background: linear-gradient(90deg, #007bff, #28a745); } - 注意：若同时启用
.progress-bar-animated，条纹动画会失效——两者不兼容
响应不同状态（success/warning/danger）时不要硬编码颜色
Bootstrap 4 自带的语义化类（如 .bg-success）会和 .progress-bar 冲突，因为它们都设 background-color，后者权重更高，导致状态类无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 删掉冗余的
.bg-*类，只保留.progress-bar和自定义类 - 若需动态切换，用 JS 修改 class 名比内联 style 更可靠：
el.classList.replace('custom-warning', 'custom-danger'); - 检查浏览器 DevTools 中 computed 样式，确认最终生效的是你写的规则，而非 Bootstrap 源码中的
.progress-bar.bg-success
移动端适配时注意高度和圆角继承问题
Bootstrap 4 的 .progress 高度是 1rem（约 16px），但 .progress-bar 默认不设 height，靠父容器撑开。一旦你用 transform: scaleY() 或 flex 缩放，容易导致填充错位或圆角丢失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一控制高度：给
.progress设固定height，并确保.progress-bar的height: 100% - 圆角来自
.progress的border-radius，但.progress-bar默认没继承，需显式加：.progress-bar { border-radius: 0.25rem; } - 在 iOS Safari 上，若进度值极低（如 1%），
width计算可能被舍入为 0 —— 建议最低设min-width: 2px
