直接修改 .btn-close 的 filter 或 color 无效，因其图标为伪元素 ::before 渲染的 Unicode × 符号，受 filter: invert(1) brightness(2) 覆盖；应先设 filter: none 再配 color，并限定选择器如 .alert .btn-close 避免全局污染。
直接修改 .btn-close 的 filter 或 color
Bootstrap 5 的警告框关闭按钮（×）默认是通过 .btn-close 类渲染的，它本身是一个伪元素（::before），内容为 Unicode × 符号，颜色由 color 控制，但受 filter: invert(1) brightness(2) 影响 —— 这才是关键。直接设 color: red 不生效，因为 filter 覆盖了原始颜色。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
filter调整：比如filter: hue-rotate(0deg) brightness(1) invert(0);清除默认反转，再配合color控制最终色值 - 或彻底重置：在自定义样式中对
.alert .btn-close设置filter: none; color: #dc3545;（例如红色） - 注意选择器权重：Bootstrap 的
.btn-close原始样式带!important，所以你的规则必须更具体，比如写成.alert-warning .btn-close或加!important（不推荐，但有时必要）
按警告框类型单独控制关闭图标颜色
如果你只希望「警告型」（.alert-warning）的关闭图标变深黄，而错误型（.alert-danger）保持红色，就不能全局覆盖 .btn-close，得靠上下文限定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写成
.alert-warning .btn-close { filter: none; color: #856404; } - 若同时要改 hover 效果，补上
.alert-warning .btn-close:hover { color: #6f5200; } - 避免污染其他组件：Bootstrap 的
.btn-close也用于模态框、toast 等，所以限定在.alert下更安全
使用 CSS 变量覆盖 Bootstrap 的默认关闭按钮样式
Bootstrap 5 支持 CSS 变量，但 .btn-close 并未暴露 --bs-btn-close-color 这类变量（它只用了硬编码的 color 和 filter）。所以不能靠改变量一劳永逸，但你可以自己定义并复用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
:root或.alert上定义变量，比如--alert-close-color: #1a73e8; - 然后写
.alert .btn-close { --bs-btn-close-color: var(--alert-close-color); filter: none; color: var(--alert-close-color); } - 这样后续调整只需改一个变量，但注意：Bootstrap 原生不读取这个变量，
--bs-btn-close-color是你自创的，仅作维护便利
为什么用 filter 而不是直接改 background？
因为 .btn-close 的 × 图标是字体符号（font-family: "Bootstrap Icons" 或系统等宽字体），不是 SVG 或背景图。它没有 background 可设，只有 color + filter 控制显示效果。
常见踩坑点：
- 误以为它是 SVG，尝试用
fill—— 无效，因为不是内联 SVG 元素 - 只改
.btn-close不加.alert前缀，结果 toast 和 modal 的关闭按钮也被连带改了 - 在 dark mode 下忘记适配：如果用了
filter: invert(1)，暗色背景可能让图标变不可见，需配合@media (prefers-color-scheme: dark)单独处理
最稳妥的做法是：限定作用域 + 清除 filter + 显式设 color。别指望 Bootstrap 自动适配你的主题色，它的关闭图标样式是“固定滤镜+继承色”，得手动接管。
