应使用 background 而非 background-color 设置渐变，保留 border 和 color 原逻辑；统一 border-radius 并同步 .alert-dismissible 中关闭按钮圆角；显式指定文字色与边框色以保障可读性与视觉一致性。
Alert 背景用 CSS 渐变替换纯色，别碰 background-color
Bootstrap 的 .alert 默认靠 background-color 控制底色，直接覆盖它会丢失渐变效果。必须用 background（而非 background-color）声明线性渐变，并保留 border 和 color 的原始逻辑。
实操建议：
- 在自定义 CSS 中写
.alert { background: linear-gradient(135deg, #ff9a9e, #fad0c4); }，注意不要加!important—— Bootstrap 5 的.alert权重不高，直接覆盖即可 - 渐变方向建议用
135deg或to bottom right，避免水平/垂直渐变在窄屏上显得生硬 - 务必保留
border: 1px solid transparent（Bootstrap 默认值），否则渐变会盖住边框；如需边框色，改用border-color单独设
圆角要统一控制 border-radius，警惕 .alert-dismissible 的干扰
Bootstrap 5 默认给 .alert 设了 border-radius: 0.25rem，但带关闭按钮的 .alert-dismissible 会额外影响右上/右下角弧度 —— 它内部的 .btn-close 容器自带 border-top-right-radius 和 border-bottom-right-radius，容易导致右侧圆角不一致。
实操建议：
- 全局统一设
.alert { border-radius: 0.5rem; }，然后单独重置关闭按钮区域：.alert-dismissible .btn-close { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } - 如果用了
.alert-link，检查其text-decoration是否被渐变背景干扰（深色文字配浅渐变可能对比度不足），必要时加color: inherit - 移动端小屏下，
0.5rem圆角可能显得过大，可配合媒体查询降为0.375rem
渐变 + 圆角组合下，文字颜色和边框需手动微调
纯色 Alert 的文字色由 Bootstrap 根据背景自动计算（如 .alert-danger 用白字），但渐变背景无法触发这套逻辑，文字常因局部色值过浅而看不清。
实操建议：
- 对每个渐变 Alert 类型，显式指定文字色：
.alert-success { color: #155724; }（参考 Bootstrap 原始色值表） - 边框色不能依赖默认透明，建议设为渐变中较深色的 20% 透明度：
border-color: rgba(0, 0, 0, 0.1); - 慎用
box-shadow模拟立体感 —— 渐变本身已有层次，叠加阴影易造成视觉混乱，尤其在暗色主题下
