最稳妥的方式是修改 css 自定义变量而非硬覆盖样式；bootstrap 5+ 推荐通过 :root 或局部 class 覆盖 --bs-badge-bg、--bs-badge-border-color 和 --bs-badge-color，并显式添加 border 才能显示边框；需注意透明背景与边框搭配、颜色对比度及多环境适配。
直接改 .badge 的 CSS 变量最稳妥
Bootstrap 5+ 默认用 CSS 自定义变量控制 .badge 的样式，硬覆盖 class 或重写 background-color 容易被后续版本或深嵌套打断。推荐优先改变量，而不是直接写 !important。
在你的自定义 CSS（或 <style></style> 块）里覆盖这些变量：
:root {
--bs-badge-bg: #6c757d; /* 背景色 */
--bs-badge-border-color: #495057; /* 边框色（仅当 badge 有 border 时生效）*/
--bs-badge-color: #fff; /* 文字色 */
}
注意：默认 .badge 不带边框，所以 --bs-badge-border-color 需要配合额外样式才能显示：
- 加
border: 1px solid var(--bs-badge-border-color); - 或用
border: 1px solid;+ 单独设border-color
给特定 badge 单独配色，别污染全局
如果只改某几个 badge（比如状态标签），别动 :root，而是用局部 class + 变量覆盖：
.badge-outline-primary {
--bs-badge-bg: transparent;
--bs-badge-border-color: #0d6efd;
--bs-badge-color: #0d6efd;
border: 1px solid var(--bs-badge-border-color);
}
然后 HTML 里这样用：
<span class="badge badge-outline-primary">待审核</span>
关键点：
- 必须显式加
border才能看到边框，变量本身不自动触发边框渲染 -
--bs-badge-bg: transparent是为了清除默认背景，否则边框会被盖住 - 文字色和边框色最好保持一致，否则对比度可能不达标
Bootstrap 4 和 5 的处理方式差异大
Bootstrap 4 没有这些 CSS 变量，.badge 样式全靠 class 控制（如 .badge-primary），想改边框就得重写整个选择器：
.badge.badge-primary {
background-color: #fff;
color: #007bff;
border: 1px solid #007bff;
}
而 Bootstrap 5+ 的变量方案更灵活，但要注意：
- 如果你用的是 Sass 版本，应该在
$theme-colors之外单独定义$badge-bg等变量再编译 - CDN 引入的 CSS 文件无法修改原始变量，只能靠后加载的 CSS 覆盖
- 某些第三方组件（比如 Vue Bootstrap）可能封装了 badge，得查它暴露的 prop 或 class 名
边框+背景组合容易忽略的细节
纯色背景 + 同色边框看起来像没边框，这是最常见的视觉陷阱。实际使用中建议：
- 边框色比背景色深 1–2 个灰阶（比如背景
#e9ecef，边框用#dee2e6） - 透明背景 + 实色边框时，记得设
padding别太小，否则文字贴边难读 - 用
box-shadow: inset 0 0 0 1px currentColor替代border，能避免边框影响布局尺寸
真正麻烦的不是改颜色，而是让组合在所有尺寸、主题模式（dark/light）、屏幕缩放下都可读——变量方案只是起点，最终得靠真实环境验证。
