用 background-image 替换 .progress-bar 默认背景色以实现渐变和发光效果，需保留 width 内联样式、用伪元素 ::after 模拟光晕层并设 z-index: -1，同时确保 transition 同步、兼容性降级处理。
用 background-image 替换默认背景色
Bootstrap 5 的进度条（.progress-bar）默认靠 background-color 填充，没法直接发光或做渐变动画。必须用 background-image 覆盖它，同时保留 width 控制的动态长度逻辑。
关键点：不能删掉 Bootstrap 的 width 内联样式，否则进度不随 JS 更新；而是用更高优先级的 background-image 取代颜色填充。
- 写在自定义 CSS 中，且选择器权重 ≥
.progress-bar（比如加个父容器类或用!important） - 渐变方向建议用
to right，和进度条流向一致，避免视觉错位 - 发光效果本质是高斯模糊 + 多层渐变叠加，纯 CSS 实现需配合
filter: blur()和伪元素
用 ::after 伪元素实现外发光
直接对 .progress-bar 加 filter: blur() 会模糊整个条（包括边缘），导致和容器交界处发虚。更稳的做法是用伪元素模拟“光晕层”：
.progress-bar {
position: relative;
background: linear-gradient(90deg, #4dabf7, #8668f9);
}
.progress-bar::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: inherit;
filter: blur(8px);
opacity: 0.7;
z-index: -1;
}
-
z-index: -1确保光晕在底层，不遮挡实际进度内容 -
opacity控制发光强度，太大会吃掉主色，太小看不出效果 - 注意：
blur()在 Safari 旧版有渲染 bug，若需兼容可降为4px并加-webkit-filter
保持响应式与 JS 动态更新不冲突
Bootstrap 5 通过 JS 动态设置 style="width: XX%"，所有自定义样式必须不破坏这个机制。常见翻车点：
- 误用
background-size: 100% 100%—— 这会让渐变被拉伸变形，应改用background-size: auto或固定尺寸（如200% 100%配合background-position动画） - 给
.progress容器设了overflow: hidden（Bootstrap 默认有），但伪元素光晕可能被裁剪，需确认父容器未意外添加overflow: hidden - 如果用了
transition: width .3s，发光层也要同步过渡，否则出现“进度跑光晕没跟上”的割裂感
IE 不支持时的降级处理
IE11 及以下不支持 filter: blur() 和现代渐变语法（如 linear-gradient(to right, ...)）。如果项目还需兼容，得用两套方案：
- 用
@supports (filter: blur(1px))包裹发光样式，IE 自动跳过 - 基础渐变用老写法：
background: #4dabf7; background: linear-gradient(left, #4dabf7, #8668f9); - 完全放弃发光，只保留双色渐变 —— 用户至少能看到进度变化，比白条强
真正麻烦的是动画同步：JS 修改 width 后，发光层位置必须实时匹配，而 IE 不支持 transform 伪元素，所以别硬撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
