Bootstrap 5+ 的 .badge 默认无边框，需手动添加 border-style（如 solid）和 border-width 才能显示边框；预设背景色类会干扰自定义边框，推荐用自定义 class 或内联 style 控制 background-color、border 和 color，并通过媒体查询适配暗色模式。
Badge边框粗细无法直接用Bootstrap类控制
bootstrap 5+ 的 .badge 默认是纯色填充、无边框的样式，它压根没提供类似 .border-2 这样的边框粗细类。想改边框，必须手动加 css —— 不是“不支持”，而是设计上就默认去边框。
常见错误是试图叠加 .border 和 .border-2 类，结果发现没反应：因为原生 .badge 的 border 值是 0，且未设 border-style，光有宽度没用。
- 必须显式设置
border-style: solid（或dashed等） - 推荐用内联 style 或自定义 class，避免污染全局
.badge - 注意 padding 会受 border 影响，可能需要微调（比如加
px-2 py-1覆盖默认值）
背景色组合得避开冲突的预设类
Bootstrap 自带的 .bg-primary、.bg-success 等会覆盖你自定义的 background-color，但它们本身不带透明度或渐变。如果想实现「浅蓝底 + 深蓝边」这类组合，不能只靠预设类叠加。
典型踩坑：写 New，结果边框颜色被 .bg-info 的高优先级 text/border 规则干扰，实际边框可能是灰色或不可见。
- 优先用自定义 class 控制
background-color和border同时生效 - 若坚持用预设背景色，需用
!important强制覆盖其 border 样式（不推荐） - 深色背景配浅色文字时，记得同步调
color，否则文字可能看不清
推荐的轻量定制写法（不破环原有逻辑）
直接在 HTML 里用 style 最快，适合单点调整；项目多处使用，建议抽成 class：
<span class="badge" style="background-color: #4dabf7; border: 2px solid #2980b9; color: white;">Beta</span>
或者定义一个新 class（加到你的 CSS 文件里）：
.badge-outline-primary {
background-color: #e6f0ff;
border: 2px solid #4dabf7;
color: #4dabf7;
padding: .25em .5em;
}
然后这样用：Beta。
- 别改
.badge原始类，防止影响其他地方 - padding 值建议保持和原生 badge 一致（
.25em .5em），否则尺寸会突兀 - 如果用了
font-size: .75rem的小号 badge，border 宽度超过 2px 就容易显得臃肿
暗色模式下 Badge 颜色要单独处理
Bootstrap 5.3+ 支持暗色模式，但 .badge 的预设类（如 .bg-dark）在暗色主题下不会自动反色 —— 它只是固定色值。如果你自定义了背景色，暗色模式下很可能变成黑底黑字，完全看不见。
解决办法只有 CSS 媒体查询或 @media (prefers-color-scheme: dark)：
.badge-custom {
background-color: #f0f9ff;
border: 1px solid #3b82f6;
}
@media (prefers-color-scheme: dark) {
.badge-custom {
background-color: #1e3a8a;
border-color: #3b82f6;
color: #bfdbfe;
}
}
这个细节很容易被忽略，尤其测试时只在亮色模式下看效果。
真正要用在生产环境的 Badge 样式，边框、颜色、暗色适配这三块都得一起考虑，缺一不可。
