直接用text-{color}类最简单但非万能，因依赖父元素currentColor；唯一可靠方式是通过--bs-spinner-border-color变量覆盖，如style="--bs-spinner-border-color:#0d6efd;"或作用域类，避免!important破坏动画轨迹与兼容性。
直接用text-{color}类最简单，但不是所有情况都生效
bootstrap 5 的 .spinner-border 和 .spinner-grow 默认通过 currentcolor 继承文字颜色，所以加 text-primary、text-success 这类语义类是最轻量的方案。但要注意：它只在父容器有明确文字色时才起作用；如果父元素没设 color（比如空 div 或 flex 容器），或者被其他 css 覆盖了，就会 fallback 到浏览器默认色（通常是黑色）。
--bs-spinner-border-color 是唯一可靠的自定义方式
Bootstrap 5.3+ 把边框色完全交给 CSS 变量控制，border-color 直接写在元素上会被忽略。必须用变量覆盖：
- 全局改（慎用）：
:root { --bs-spinner-border-color: #dc3545; } - 局部改（推荐）：
<div class="spinner-border" style="--bs-spinner-border-color: #0d6efd;"></div> - 作用域类（适合多主题）：
.spinner-blue { --bs-spinner-border-color: #0d6efd; }然后<div class="spinner-border spinner-blue"></div>
为什么!important + border-color 不该用
有人试过这样写：.my-spinner { border-color: #28a745 !important; }——它可能“看起来”生效，但会破坏两个关键机制：
-
.spinner-border实际只渲染 top 边框，其余三边是transparent，硬改border-color会让四边同时变色，动画轨迹错乱 - Bootstrap 的 keyframes 动画依赖
border-style: solid和精确的border-width，!important容易干扰这些隐式规则，尤其在 Safari/Firefox 下出现卡顿或颜色偏淡 - 后续升级 Bootstrap 版本时，这类 hack 很难维护
按钮里 Spinner 颜色不同步？问题不在颜色本身
常见现象：按钮用了 btn-danger，但里面的 .spinner-border 还是蓝色。这不是颜色没设对，而是按钮没继承文字色：
- 确保按钮本身有
color声明（btn-danger类自带，但自定义按钮可能漏） - 别把
text-danger加在 spinner 上，而应加在按钮容器上：<button class="btn btn-danger text-danger"><span class="spinner-border"></span></button> - 如果按钮禁用了（
disabled），默认会降级为text-muted，这时 spinner 也会变灰——这是预期行为，不是 bug
disabled、focus、暗色模式切换），取决于你有没有让它的样式链完整继承 font-size、color、opacity 这些基础属性。变量方案之所以可靠，正因为它天然跟随 CSS 继承链。
