Bootstrap的.alert组件不提供开箱即用的边框粗细、圆角、阴影等精细控制类，所有调整必须通过自定义CSS覆盖实现：需确保样式文件在Bootstrap之后加载，用高权重选择器（如.alert { border-width: 2px !important; }）覆盖默认值，并协同设置border-radius与box-shadow以避免渲染异常。
Bootstrap 的 .alert 组件不提供开箱即用的边框粗细、圆角、阴影等精细控制类，所有样式调整都必须通过自定义 CSS 覆盖实现——没有捷径，也不该指望加个 class 就生效。
直接覆盖 .alert 的 border-width 无效？检查加载顺序和权重
很多人写 .alert { border-width: 2px; } 却没效果，根本原因是 Bootstrap 的原始 CSS 规则优先级更高（比如 .alert-danger { border: 1px solid #f8d7da; } 是复合声明）。只改 border-width 不够，必须同时确保选择器权重足够，且 CSS 文件在 Bootstrap 之后加载。
- 把自定义样式放在
<link>引入 Bootstrap CSS 之后，或写在<style>标签里并置于</body>前 - 简单有效写法：
.alert { border-width: 2px !important; }（全局统一） - 按类型精细化控制：
.alert-warning { border-width: 3px !important; }（只影响警告类） - 别动
border-style或border-color，否则可能破坏原有视觉语义
.alert 圆角和阴影怎么调？别碰 border-radius 和 box-shadow 默认值
Bootstrap v5 默认给 .alert 设了 border-radius: 0.375rem 和 box-shadow: none。想加阴影或改圆角，不是“启用某个开关”，而是直接重写这两个属性。
- 加大圆角：
.alert { border-radius: 0.5rem !important; } - 加柔和阴影：
.alert { box-shadow: 0 1px 4px rgba(0,0,0,.08) !important; } - 若用了
alert-dismissible，关闭按钮的border-radius可能被单独控制，需额外处理.btn-close - 响应式适配：小屏下圆角过大可能显得突兀，可配合
@media (max-width: 576px)降级
修改提示文字颜色、背景色，但别破坏语义对比度
直接改 .alert-inner 或 .alert 的 color/background-color 很容易，但要注意 WCAG 对文本可读性的最低对比度要求（至少 4.5:1）。尤其改浅色背景（如 .alert-light）时，黑色文字可能不达标。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：优先用 Bootstrap 自带的上下文类（
alert-success,alert-danger），它们已通过对比度验证 - 自定义色值时，用在线工具（如 WebAIM Contrast Checker）验证
background-color和color组合 - 改
.alert-link颜色时，记得同步更新其:hover状态，否则交互反馈会丢失 - 避免对
.alert-heading单独设色，它应继承父级.alert的语义色
动画和关闭按钮样式失效？关键在 fade 和 show 类的组合时机
alert-dismissible + fade show 才能触发淡入动画；漏掉 show，元素会一直 hidden；没加 fade，就只有显隐切换，没有过渡效果。关闭按钮本身依赖 btn-close 和 data-bs-dismiss="alert" 才能绑定 JS 行为。
- 必须同时存在：
class="alert alert-warning alert-dismissible fade show" - 关闭按钮 HTML 必须完整：
<button type="button" class="btn-close" data-bs-dismiss="alert"></button> - 自定义关闭按钮图标时，别删
btn-close类，否则 JS 无法识别——可在其伪元素上覆盖::before内容 - 若禁用 JS，
data-bs-dismiss失效，此时需用纯 CSS 方案（如:has(> .btn-close[aria-hidden="true"]) { display: none; }，但兼容性有限）
真正麻烦的不是写几行 CSS，而是每次升级 Bootstrap 版本时，它的内部选择器结构或默认值可能微调——所以别把自定义样式硬编码进组件模板里，统一收口到独立 CSS 文件，并在升级后快速回归测试 .alert 的边框、圆角、文字对比度这三项。
