bootstrap警示框渐变背景必须用background或background-image覆盖带!important的background-color，同步调整color和border-color确保可读性，并加!important生效；仅改background-color无效因其不接受linear-gradient()函数。
直接写 .alert-warning { background: linear-gradient(...) } 没用——bootstrap 的 background-color 带 !important，必须用 background 或 background-image 覆盖，且必须同步调色文字和边框。
为什么 background-color 改不了渐变
Bootstrap 4+ 所有 .alert-* 类都用 background-color: ... !important 锁死背景色。你写 background-color: linear-gradient(...) 是非法语法（linear-gradient() 不是颜色值），浏览器直接忽略整条声明。
-
background-color只接受颜色值（如#fff、rgba()、var(--bs-warning)），不能塞渐变函数 -
background是简写属性，能接linear-gradient()，且优先级高于background-color，可覆盖它 -
background-image更精准——Bootstrap 内部按钮/进度条等组件就是靠它实现渐变，不会意外清掉background-color的 fallback
怎么写才真正生效
用 background-image 最稳妥，尤其对 .alert 这类状态敏感组件：
- 必须加
!important：Bootstrap 的原始规则带!important，不加就赢不了权重 - 推荐搭配
background-color: transparent !important：保底防止某些浏览器 fallback 失效 - 方向写标准语法：
to right或135deg，别写left to right（无效）或to-r（非标准） - 至少两个色标：
linear-gradient(to right, #d4edda, #c3e6cb)；只写一个就是纯色 - 移动端 Safari 对
50%, #000这种 color-stop 写法敏感，改用50% #000（空格分隔）
示例（直接可用）：
.alert-success {
background-image: linear-gradient(to right, #d4edda, #c3e6cb) !important;
background-color: transparent !important;
color: #155724 !important;
border-color: #b8daff !important;
}
文字和边框颜色为什么看不清
原生 .alert-warning 的文字色 #856404 是按纯色背景设计的，换成浅色渐变后对比度常低于 WCAG 4.5:1 标准，阳光下几乎不可读。
- 必须手动重设
color和border-color，不能依赖默认值 - 边框别省略：渐变会让边缘“发虚”，加一道实色边框（如
border: 1px solid #ffc107）能立刻提升辨识度 - 用 WebAIM Contrast Checker 这类工具校验，尤其注意深色文字在浅渐变上的可读性
- 避免用命名色（如
yellow）：不同浏览器解析差异大，十六进制或rgba()更稳
别踩这些坑
常见失效不是代码写错，而是被其他层覆盖或结构没撑开：
-
<div class="alert alert-warning"></div>是空的？那没高度，渐变自然不可见——加min-height: 40px或放点文字 - 父容器有
background-color: white且z-index更高？子元素渐变会被盖住 - 用了
background: #fff这种简写？它会清空background-image，渐变直接消失 - 自定义 class 名和 Bootstrap 的 CSS 变量冲突？比如写了
--bs-alert-bg却没关掉原生逻辑，结果样式打架
最麻烦的其实是渐变 + 文字 + 边框三者颜色的协同调试——稍一疏忽，就变成灰蒙蒙一片，得反复测对比度，而不是只盯着背景能不能出来。
