Bootstrap Alert 关闭图标需通过替换 background-image（推荐）、伪元素 content 或自定义结构覆盖；直接改 color 无效因 v5.3+ 使用 SVG 背景图，v4 则受 opacity 和 line-height 限制。
怎么覆盖 Bootstrap Alert 的关闭图标（close 按钮）样式
bootstrap 的 .alert 默认关闭按钮是通过 × 字符 + .btn-close（v5.3+）或 .close（v4/v5.2-）实现的，它本身没用 svg 或图标字体，而是纯 css 伪元素 + 字符。想改样式，不能只换颜色，得重置伪元素行为。
- 直接给
.btn-close设置color只影响字符颜色，但默认有opacity和filter干扰，容易失效 - 用
::before或::after覆盖时，必须加!important（Bootstrap 的规则优先级高） - v5.3+ 默认用
background-image: url("data:image/svg+xml,...")，所以改图标本质是换 base64 SVG
修改关闭图标的三种可靠方式（按推荐顺序）
优先选不影响 HTML 结构、不破坏无障碍支持的方式。以下都基于 Bootstrap 5.3+（若用 v4，请把 .btn-close 换成 .close）：
-
方式一：用
background-image替换 SVG（最稳）：
复制 Bootstrap 原始 SVG 的 base64，解码后改成你需要的路径/颜色，再重新编码。例如把叉号换成「×」字符的简化版：.btn-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586l6.293-6.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E"); } -
方式二：用
content+ 字符替换（轻量但兼容性略低）：
禁用原生背景，用伪元素插入字符。注意要清除background并设置font-size和line-height对齐：.btn-close { background: none; padding: 0; } .btn-close::before { content: "✕"; font-size: 1.5rem; line-height: 1; color: #0d6efd; } -
方式三：完全自定义按钮结构（最灵活，但需改 HTML）：
删掉data-bs-dismiss="alert"，自己写一个带aria-label的按钮，并绑定bootstrap.Alert.getInstance(el).close()手动关闭逻辑
为什么直接改 color 或 font-size 常常无效
因为 Bootstrap 的 .btn-close 在 v5.3+ 中默认使用 background-image 渲染图标，不是文字；而 v4 的 .close 虽然用 × 字符，但被包裹在 font-size: 1.5rem + line-height: 1 + opacity: .5 多层限制里，单独调 color 会被 opacity 削弱，且 line-height 不匹配会导致上下偏移。
- v5.3+：改
color完全没用，图标是 SVG 背景图 - v4：改
color有效，但必须同时重置opacity: 1和line-height: 1，否则视觉错位 - 所有版本：如果用了
!important还不生效，大概率是 CSS 选择器优先级不够，比如你写了.alert .btn-close，但 Bootstrap 用的是.btn-close+:not(:disabled):not(.disabled)组合，优先级更高
容易被忽略的细节和副作用
改完图标后，别忘了验证这些点，否则线上可能出问题：
-
focus状态下的外框（box-shadow）是否还可见？Bootstrap 默认用box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25)，如果新图标太小，焦点环会显得突兀 - 深色模式下是否自动适配？Bootstrap 5.3+ 的
.btn-close用var(--bs-btn-close-color)，如果你硬编码了颜色值（如#dc3545），深色模式不会变 - 缩放（
zoom或transform: scale()）是否让图标模糊？SVG base64 方式基本无损，字符方式在高 DPI 屏幕上可能发虚 - 如果项目用了 CSS-in-JS（如 Emotion）或 Shadow DOM，全局覆盖
.btn-close可能不生效，得提升作用域或用:host ::ng-deep（Angular）等穿透写法
改一个关闭图标，真正麻烦的从来不是怎么换，而是换完之后谁还在用旧变量、有没有人顺手删了 aria-label、以及那个藏在 _reboot.scss 里的 user-select: none 是否导致双击误触发——这些比 SVG 编码难盯。
