bootstrap 5+ 的 .badge 默认无边框、纯色填充，修改边框粗细和背景色组合必须手动写 css；因不提供 .border-2 类，且 .border + .bg-primary 无效——默认 border: 0 且无 border-style，.bg-primary 会覆盖 background-color，需用自定义 class 显式声明 border、transparent background-color（加 !important）、color 和 padding。
Bootstrap 5+ 的 .badge 默认无边框、纯色填充，想改边框粗细和背景颜色组合，必须手动写 CSS —— 它不提供 .border-2 这类边框工具类，也不支持直接叠加预设背景色类来实现「浅底深边」效果。
为什么 .border + .bg-primary 不生效
常见错误是给 <span class="badge bg-primary border">New</span> 加 .border 类，结果边框看不见。原因有三：
-
.badge默认border: 0，且未声明border-style，光有border-width（如.border提供的1px）没用 -
.bg-primary内部用background-color: rgba(var(--bs-primary-rgb), 1)，会覆盖你后续设的background-color: transparent，除非加!important -
.border类只设边框宽度和样式，但不控制颜色；而.bg-primary会连带影响color和border-color，导致边框实际显示为灰色或不可见
怎么安全地同时控制边框粗细和背景色
推荐用自定义 class，显式声明全部关键属性，避免依赖 Bootstrap 内置类的隐式行为：
- 必须写全
border：包括width、style、color，例如border: 2px solid #0d6efd - 背景色要用
background-color: transparent !important强制清空原生背景，否则.bg-primary会干扰 - 文字颜色需同步设
color: #0d6efd !important，否则继承默认白色，在浅边框上不可读 -
padding建议微调为.35em .6em，因为边框会占用空间，原生值是为无边框设计的
.badge-outline-primary {
background-color: transparent !important;
color: #0d6efd !important;
border: 2px solid #0d6efd;
padding: .35em .6em;
}
如何复用 Bootstrap 主题变量避免硬编码颜色
如果你项目用了 Sass 或支持 CSS 变量（v5.3+），别写死十六进制值：
- Sass 场景：直接引用
$primary变量，编译时自动注入主题色 - CSS 变量场景：用
rgba(var(--bs-primary-rgb), 0.8)控制背景透明度，或border-color: var(--bs-primary)同步边框色 - 注意：
color不能直接用var(--bs-primary)，因为.badge默认设了color: #fff，需额外声明 - 暗色模式下，记得加
@media (prefers-color-scheme: dark)重置变量，否则边框可能消失
移动端和小字号下容易被忽略的细节
边框在小尺寸场景容易出问题，不是样式写错，而是渲染逻辑被忽略：
- 用
rem或em单位设边框宽，遇到字体缩放时可能模糊；建议统一用px（如border: 2px solid ...） - 嵌入
<button class="btn btn-sm"></button>时，.badge的font-size: 0.75em会进一步缩小，边框相对变细，看起来“没边框”，此时需加大border-width -
.badge-pill已废弃，改用.rounded-pill；但若你手动设了border-radius，它会和.rounded-pill冲突，优先级高的会覆盖掉圆角
