必须用 background-image 替换 linear-gradient 才能自定义 Bootstrap 5 条纹进度条颜色，background-color 无效；.progress-bar-striped 和 .progress-bar-animated 需同步修改且方向、色标一致，并注意 .progress 底色对比度。
直接覆盖 background-image 才生效，background-color 无效
Bootstrap 5 的条纹进度条（.progress-bar-striped）默认用的是 linear-gradient 背景图，不是纯色。你设 background-color 完全没用——它被 gradient 压在底层，根本渲染不出来。
必须动手改 background-image，而且得用 linear-gradient 替换，不能删掉再补 background-color（否则响应式动画、深色模式适配都会出问题）。
实操建议：
- 用
background-image: linear-gradient(to right, #4dabf7, #228be6)这类写法，方向和颜色都可控 - 务必加
!important：Bootstrap 5.3+ 虽已移除部分!important，但很多项目仍基于旧版构建，不加大概率被覆盖 - 别只写一个色值：
linear-gradient(to right, #007bff)是无效语法，至少两个色标
.progress-bar-striped 和 .progress-bar-animated 必须同步改
动画条纹（.progress-bar-animated）不是独立实现，它只是给 .progress-bar-striped 加了个 animation 属性，复用同一套 background-image。你只改条纹不带动画，或者反过来，都会导致视觉错位或静止不动。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 条纹颜色变了，但动画卡住不动 → 没同步改
.progress-bar-animated的background-image - 动画跑起来了，但颜色还是默认蓝灰 → 只改了
.progress-bar-animated，漏了.progress-bar-striped - 动画方向反了（比如横向变竖向）→ 两个选择器里写的
linear-gradient方向不一致
正确做法是把两个规则写在一起，确保完全一致：
.progress-bar-striped,
.progress-bar-animated {
background-image: linear-gradient(to right, #28a745, #218838) !important;
}
自定义渐变时，高度和重复频率影响条纹粗细
Bootstrap 默认的条纹宽度约 2px，靠 linear-gradient 的色标位置控制。你换颜色时如果没调参数，可能条纹变宽、变糊、甚至“糊成一片”。
关键参数解释：
-
to right决定条纹走向；改成to bottom就是横条纹（少见但合法） - 色标位置可显式写：如
linear-gradient(to right, #28a745 0%, #28a745 50%, #e9ecef 50%, #e9ecef 100%)—— 这样能精确控制条纹宽高比 - 想让条纹更细？缩小中间色标间距，比如把
50%改成10%；更粗就拉宽 - 注意：别用
repeating-linear-gradient，Bootstrap 不依赖它，硬加反而干扰原有动画逻辑
深色背景上条纹看不清？别只调颜色，检查底色和对比度
很多人改完条纹色发现“怎么还是灰蒙蒙的”，其实问题不在条纹本身，而在外层容器 .progress 的底色（默认 #e9ecef）和条纹色对比太低。
容易被忽略的三点：
-
.progress的background-color必须手动调浅或调深，否则条纹再亮也浮不起来 - 深色模式下，
.progress默认不会自动变暗，得配合@media (prefers-color-scheme: dark)单独覆盖 - 如果用了
bg-dark类在.progress上，条纹色建议用#ffffff或#e2e8f0，别用#64748b这类中灰，对比度不足
最简兜底方案：
.progress {
background-color: #f1f5f9;
}
.progress-bar-striped {
background-image: linear-gradient(to right, #059669, #047857) !important;
} 
