直接改 background-color 无效，因 bootstrap 5 默认用 linear-gradient() 覆盖；须覆盖 background-image 并加 !important，同时兼顾 .progress-bar-striped/.progress-bar-animated 同步、深色模式适配及外层容器底色调整。
直接改 background-color 无效，必须覆盖 background-image 并加 !important —— Bootstrap 5 默认用 linear-gradient() 渲染进度条，纯色会被压在底层。
为什么 .progress-bar 的 background-color 设了也不生效？
Bootstrap 5 的 .progress-bar 默认带 background-image: linear-gradient(...)，它渲染层级高于 background-color。你写的 background-color: #ff6b6b 确实存在，但完全被渐变图层遮住了。
- 检查浏览器开发者工具的 Computed 样式，会看到
background-image非空，而background-color虽然有值，但“不可见” - 错误写法：
.progress-bar { background-color: #ff6b6b !important; }—— 仍无效 - 正确路径：删掉或替换
background-image，同时保留background-color作降级（比如用于不支持渐变的老环境）
怎么写有效的自定义渐变 background-image？
用 linear-gradient() 替换默认背景图，方向、色标、!important 缺一不可。
- 基础写法：
background-image: linear-gradient(to right, #4dabf7, #228be6) !important; - 必须至少两个色标，
linear-gradient(to right, #007bff)是无效语法 - 方向可选：
to right（横向条纹）、to bottom（竖向）、135deg（对角），保持和动画方向一致 - 若要更细条纹，调色标间距：
linear-gradient(to right, #28a745 0%, #28a745 10%, #e9ecef 10%, #e9ecef 20%)
进度条带条纹（.progress-bar-striped）时颜色怎么同步？
.progress-bar-striped 和 .progress-bar-animated 共享同一套 background-image，只改一个会导致动画卡住或颜色错位。
- 必须一起写：
.progress-bar-striped, .progress-bar-animated { background-image: linear-gradient(...) !important; } - 漏掉
.progress-bar-animated→ 条纹颜色变了，但不动 - 漏掉
.progress-bar-striped→ 动画跑起来了，但还是默认蓝灰 - 两个选择器里
linear-gradient方向不一致 → 动画方向打架，视觉跳变
深色模式下渐变发灰或文字看不清怎么办？
硬编码颜色值在深色模式下对比度崩塌，文字常不可读；且边框、文字色不会自动适配。
- 别依赖
text-white或text-dark—— 它们不响应渐变变化，手动设color: #fff或更高对比度值 - 加一道浅色实边框：
border: 1px solid rgba(106, 17, 203, 0.3)，立刻提升辨识度 - 深色模式适配建议用 CSS 变量：
background-image: linear-gradient(to right, var(--grad-start), var(--grad-end))，并在:root和@media (prefers-color-scheme: dark)中分别定义
最易被忽略的是：外层 .progress 容器的底色（默认 #e9ecef）和进度条渐变是两层，改完 .progress-bar 后，如果底色太亮或太暗，整体观感依然违和——得单独处理容器背景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
