bootstrap 5.3+ 的 .btn-close 图标由 background-image 渲染 svg，需加 !important 覆盖并同步设 filter: none、background-size: 1em；更稳方案是用 ::before 伪元素插入字符，配合 position 和 currentcolor，并补全 :hover、:disabled、:focus 状态样式。
直接改 color 或 font-size 没用——Bootstrap 5.3+ 的 .btn-close 是靠 background-image 渲染 SVG 图标，不是文字。
为什么 background-image 覆盖总失败？
原生 CSS 里写的是 background-image: url("data:image/svg+xml,...") !important，还附带 filter: invert(1) opacity(.5)。你只写 .btn-close { background-image: url("..."); }，会被原生规则压制。
- 必须加
!important才能覆盖，比如：.btn-close { background-image: url("data:image/svg+xml,%3Csvg...%3E") !important; } - 必须同步写
filter: none，否则新图标发灰或完全不可见 - 记得设
background-size: 1em，不然图标可能被裁剪或缩放失真 - 如果用 PNG，还得手动加
width和height（如1.25em），否则容器太小
用 ::before 伪元素替换更稳
绕过 background-image 冲突最可靠的方式：清空背景，用伪元素插入内容。它天然规避 filter 干扰，也更容易适配暗色模式。
- 先禁用原生样式：
.btn-close { background: none; padding: 0; } - 再用
::before插入字符：.btn-close::before { content: "×"; font-size: 1.5rem; line-height: 1; color: currentColor; } - 必须加定位居中：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 别用硬编码颜色，
currentColor能自动继承文本色，适配主题切换
悬停和禁用状态样式必须单独补全
Bootstrap 对 :hover、:disabled 等状态写了独立规则，只改默认态，状态样式还是走原生逻辑——结果就是鼠标悬停时图标变灰、点击无反馈。
- 显式覆盖：
.btn-close:hover { opacity: .75; }、.btn-close:disabled { opacity: .25; } - 如果用了伪元素方案，也要给
.btn-close:hover::before单独设color或opacity - 别漏掉
:focus，否则键盘用户无法看到焦点状态 - 检查是否误加了
pointer-events: none—— 这会让按钮彻底点不动
按钮“飘”在 Alert 上方？垂直居中不能靠固定 top
原生用的是 top: 1rem; right: 1rem，当 Alert 内容变多、行高增加时，按钮就悬在视觉中心上方，尤其在移动端明显。
- 改成
top: 50%; transform: translateY(-50%)实现真正垂直居中 - 确保父级
.alert有position: relative（Bootstrap 默认有，但可能被覆盖） - 横向位置建议保留
right: 1rem，避免窄屏下溢出 - 注意：改
font-size会连带改变 SVG 图标大小，因为它是按1em缩放的
最容易被忽略的是 filter: none 和状态伪类覆盖——这两处一缺，图标要么看不见，要么 hover 时颜色不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
