bootstrap警示框渐变背景需用background（非background-color）并加!important覆盖，同步调整color和border-color确保可读性，推荐自定义class避免与css变量冲突。
Bootstrap警示框的background被!important锁死了
直接写 .alert-warning { background: linear-gradient(to right, #fff3cd, #ffeaa7); } 没用——Bootstrap 的 CSS 里用了 !important 强制覆盖背景色，光改 background 不生效。
必须覆盖它真正生效的属性：background-color 是被锁死的，但 background（整个背景声明）优先级更高，且 Bootstrap 4+ 的警示框默认用的是 background-color，没设 background，所以你可以用 background 完全覆盖它。
- Bootstrap 5 默认用
background-color+border-color，没设background，此时background: linear-gradient(...)可生效 - Bootstrap 4 同理，但部分定制版本可能加了
background声明，需检查 computed styles 确认 - 务必加
!important——不是为了“暴力”，而是因为 Bootstrap 的 CSS 权重高，不加就赢不了
linear-gradient参数写错会导致渐变消失或纯色
常见错误是漏掉方向关键词、颜色值格式不合法，或者用了不支持的语法（比如老版 WebKit 写法）。
- 方向必须明确：用
to right、135deg这类标准语法，别写left to right（无效） - 颜色值推荐用十六进制或 rgba，避免命名色（如
yellow），不同浏览器对命名色解析略有差异 - 至少两个色标，写成
linear-gradient(to bottom, #f8f9fa, #e9ecef)；只写一个色就是纯色，不是渐变 - 旧版 Safari（iOS 9.3 之前）需要
-webkit-linear-gradient前缀，但现代项目基本可忽略
示例（兼容主流浏览器）：
.alert-info { background: linear-gradient(135deg, #d0ebff, #a5d8ff) !important; }
渐变背景下文字和边框颜色容易看不清
原生警示框的文本色（如 .alert-warning 的 #856404）是按纯色背景设计的，换成浅色渐变后对比度暴跌，尤其在移动端阳光下几乎不可读。
- 必须同步调整
color和border-color，否则文字发灰、边框融进背景里 - 推荐用工具校验对比度（如 WebAIM Contrast Checker），文本与背景最低要达 4.5:1
- 边框别省略：渐变会让边缘“虚化”，加一道实色边框（如
border: 1px solid #ffc107）能立刻提升辨识度
完整可用片段：
.alert-success {<br> background: linear-gradient(to right, #d4edda, #c3e6cb) !important;<br> color: #155724 !important;<br> border-color: #b8daff !important;<br>}
自定义渐变在CSS变量和主题切换场景下难维护
如果项目用了 Bootstrap 5 的 CSS 变量（如 --bs-alert-bg），直接覆写类选择器会和变量体系脱节，后续换主题或升级 Bootstrap 版本时极易断裂。
- 优先尝试通过 CSS 变量注入渐变：修改
:root或组件作用域内的--bs-alert-warning-bg，但注意该变量默认只用于background-color，不支持渐变值 - 真正可靠的方案是用
@layer（需 PostCSS 支持）或提高样式表加载顺序，确保你的 CSS 在 Bootstrap 之后载入 - 更稳妥的做法：给警示框加自定义 class（如
alert-gradient-warning），完全脱离原生类名干扰，避免未来升级踩坑
渐变本身没问题，问题在于你把它塞进了 Bootstrap 的样式契约里——它没承诺支持渐变，所以得自己守住边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
