Bootstrap 5+ 的 .badge 默认 border: 0 且未设 border-style，故直接加 .border 类无效；必须显式声明 border-style（如 solid）并配合 border-width 和 color 才能显示边框。
为什么直接加 .border 类没反应
Bootstrap 5+ 的 .badge 默认 border: 0，且未声明 border-style。光加 .border 或 .border-2 不生效——因为这些类只设 border-width 和 border-color，但没设 border-style: solid，浏览器根本不会渲染边框。
常见错误写法：<span class="badge bg-primary border border-2">New</span>，结果边框完全不可见。
- 必须显式声明
border-style（如solid、dashed） -
.border类默认是1px，.border-2是2px，但前提是border-style已存在 - 优先用自定义 class 控制，避免和
.bg-*类的高优先级样式冲突
.badge-outline-* 类怎么写才不踩坑
想实现「浅背景 + 深边框」或「透明背景 + 彩色边框」，推荐统一用自定义 class，比如 .badge-outline-primary。关键不是颜色值本身，而是覆盖顺序和配套属性。
-
background-color: transparent !important——!important必须加，否则.bg-primary的 rgba 声明会覆盖它 -
color: #0d6efd或color: var(--bs-primary)—— 文字色要同步，不然在浅边框上可能看不清 -
border: 2px solid #0d6efd—— 宽度和样式一起写，别拆开 -
padding: .35em .6em—— 原生 badge 的 padding 是为无边框设计的，加边框后需微增，否则文字被挤压
用 CSS 变量复用主题色时要注意什么
如果你项目用了 Bootstrap 5.3+ 的 CSS 变量（如 --bs-primary-rgb），可以直接引用，但不能直接套 var(--bs-primary) 到 color 或 border-color —— 因为 --bs-primary 是十六进制值，而 color 需要的是颜色关键词或 rgb 字符串。
- 正确写法：
border-color: var(--bs-primary); color: var(--bs-primary);（前提是--bs-primary已定义为有效颜色值） - 更稳妥写法：
border-color: rgb(var(--bs-primary-rgb)); color: rgb(var(--bs-primary-rgb)); - 别用
.text-primary替代 —— 它只改文字色，不影响border或background-color - 暗色模式下记得加
@media (prefers-color-scheme: dark)重置变量，否则边框可能变灰或消失
嵌入按钮或小字号环境时边框为啥发虚或错位
Badge 的 font-size: .75rem 和 line-height: 1 依赖父元素缩放，边框宽度用 px 单位时，在不同 font-size 下视觉粗细不一致；用 em 又容易随缩放失真。
- 移动端或
font-size: 14px的容器里，2px边框可能糊成一条线 —— 改用1.5px solid或1px solid更稳 - 嵌入
.btn-sm时，徽章默认尺寸偏大，建议额外加font-size: .625rem并调padding匹配 - 如果用了
.rounded-pill，别再叠加自定义border-radius—— 它的50rem权重更高，后者会被忽略 - 真正容易被忽略的是：边框是否影响可访问性。屏幕阅读器不感知形状，但
border若太细或对比不足，色觉障碍用户可能完全看不见
