直接改 color 对 btn-close 没用，因为其图标是内联 svg 且 fill 硬编码为 #000，不继承 color；需通过 .btn-close > svg { fill: ... } 显式覆盖 fill 值，并同步处理 :hover、:disabled 等状态。
为什么直接改 color 对 btn-close 没用
Bootstrap 5 的 btn-close 默认用内联 SVG，且 SVG 中的 fill 是硬编码为 #000（不是继承自 color）。所以即使你写 .btn-close { color: red; }，图标颜色也不会变——SVG 根本不读这个值。
正确覆盖方式：重置 SVG 的 fill 属性
必须显式设置 SVG 元素的 fill，有三种可靠路径：
- 用属性选择器匹配
btn-close内的<svg></svg>：.btn-close > svg { fill: #dc3545; } - 如果用了自定义 class（比如
.btn-close-danger），优先级更高：.btn-close-danger > svg { fill: #dc3545 !important; } - 若需兼容深色模式，配合
@media (prefers-color-scheme: dark)单独设 fill 值
注意 background-image 方案会失效
有人尝试用 background-image: url("data:image/svg...") 覆盖，但 Bootstrap 5 的 btn-close 默认是内联 SVG + background: none，强行设 background 会导致图标重复或错位。更关键的是：一旦用了 background-image，就失去了 SVG 的缩放清晰性和 CSS 动态填色能力。
动态换色（如 hover / disabled）要单独处理
默认状态下改了 fill，但 :hover、:disabled 等伪类不会自动继承——它们仍用原始 SVG 的 fill。必须显式写出：
.btn-close:hover > svg,
.btn-close:focus > svg {
fill: #c82333;
}
.btn-close:disabled > svg,
.btn-close.disabled > svg {
fill: #6c757d;
}
别漏掉 .disabled 这个 class，Bootstrap 5 同时支持 HTML disabled 属性和 class 两种禁用写法。
最常被忽略的是伪类状态的 fill 覆盖，只改默认态，鼠标移上去颜色又变黑，用户会觉得样式没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
