直接改 border-color 失效，因 bootstrap 5.3+ 的 .spinner-border 依赖 --bs-spinner-border-color 变量控制颜色，且变量优先级高于 border-color；自定义 css 必须在 bootstrap.css（非 min 版）之后加载，否则变量被覆盖或未定义。
直接改 border-color 大概率失效，必须用 CSS 变量 --bs-spinner-border-color 覆盖；且你的 CSS 必须在 Bootstrap 的 CSS 之后加载，否则变量被重置为默认值。
为什么 border-color 设置不生效
Bootstrap 5.3+ 的 .spinner-border 完全依赖变量控制颜色，其真实样式是 border: var(--bs-spinner-border-width) solid transparent;，再通过 --bs-spinner-border-color 动态注入顶部边框色。你写 .spinner-border { border-color: #dc3545; } 会被变量值覆盖，DevTools 的 Computed 面板里根本看不到该声明生效。
常见错误现象包括：颜色没变、深色背景上变成不可见灰、配合 .text-light 使用时颜色错乱。
- 变量优先级高于普通
border-color声明 - 直接覆盖会绕过深色模式适配逻辑
- 旧版 Bootstrap 4 不支持该变量，但当前问题明确指向 Bootstrap 5
正确做法：用 --bs-spinner-border-color 覆盖
变量必须在 Bootstrap 样式之后生效，推荐写在 <style></style> 块末尾或独立 CSS 文件底部。作用域决定影响范围：
- 全局修改：写在
body或:root上（body更稳妥，避免 Shadow DOM 或 CSS-in-JS 场景下透传失败） - 局部修改：给外层容器加 class，如
<div class="loading-section"><div class="spinner-border"></div></div>，然后写.loading-section .spinner-border { --bs-spinner-border-color: #3498db; } - 别漏掉
--bs-spinner-border-opacity：默认是0.25，调高（如0.4）能让旋转条更实，调低更淡
示例（全局）：
body {
--bs-spinner-border-color: #6a5acd;
--bs-spinner-border-opacity: 0.3;
}
为什么用了变量还是灰色或不转
不是 JS 问题，而是样式链断了。检查三个硬性条件：
- CSS 加载顺序错误：你的自定义样式 必须在
bootstrap.css（非bootstrap.min.css）之后引入；bootstrap.min.css不含变量定义，--bs-spinner-border-color根本不存在 - 用了压缩版 CSS：CDN 或
dist/目录下的bootstrap.min.css已剥离所有变量声明，必须换用未压缩的bootstrap.css，或走 Sass 编译流程 - 选择器作用域太窄：写了
.my-spinner { --bs-spinner-border-color: red; }，但没把该 class 加在.spinner-border的父元素上——变量继承是向上查找的，.spinner-border自身设变量无效
不同尺寸或位置用不同颜色怎么办
Bootstrap 的 .spinner-border-sm 等尺寸类不改变颜色逻辑，要实现差异化配色，靠作用域隔离最干净：
- 给每个 spinner 加自定义 class：
<div class="spinner-border spinner-blue"></div> - 然后定义：
.spinner-blue { --bs-spinner-border-color: #0d6efd; }、.spinner-red { --bs-spinner-border-color: #dc3545; } - 组合使用没问题：
<div class="spinner-border spinner-border-sm spinner-red"></div> - 避免用
!important+ 多个border-color规则——变量天然支持继承和层叠，更可控
真正容易被忽略的是：你改了颜色，但没确认 --bs-spinner-border-width 是否仍匹配 --bs-spinner-width 和 --bs-spinner-height。如果手动调大宽度又没同步调整尺寸变量，旋转中心会偏移，视觉上像“抖动”或“卡顿”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
