直接加 .border 类没反应是因为 bootstrap 5+ 的 .badge 默认 border: 0 且未声明 border-style，而 border-width 必须配合 border-style 才可见；同时 .bg-primary 等类强覆盖背景色，导致边框不可见或文字不显，需同时设置 background-color: transparent !important、border、color 和 padding 才能可靠显示轮廓徽章。
为什么直接加 .border 类没反应
Bootstrap 5+ 的 .badge 默认 border: 0 且未声明 border-style，光写 .border 或 .border-2 不生效——因为 CSS 中宽度（border-width）必须配合样式（border-style）才可见。更关键的是，.bg-primary 等预设类会强覆盖 background-color，而 .border 类只设边框，不碰背景和文字色，结果常出现「边框颜色不对、文字看不见、背景被盖住」。
- 典型错误：
<span class="badge bg-primary border">New</span>→ 边框是默认浅灰，背景蓝，文字白，但边框细得几乎不可见 -
.border类本身只设border-width: 1px和border-style: solid，但它无法 override.badge的background-color声明 - 想让边框真正「露出来」，必须同时控制
background-color（常需!important）、border、color和padding
.badge-outline-* 类怎么写才可靠
推荐用自定义类名（如 .badge-outline-primary），而不是复用 Bootstrap 工具类组合——后者优先级低、易冲突、且不保证背景透明与边框色同步。核心是四要素缺一不可：背景透明、边框显式、文字色匹配、内边距微调。
-
background-color: transparent !important——!important是必须的，否则.bg-primary的 rgba 声明会盖过它 -
border: 1px solid currentColor—— 用currentColor复用color值，避免硬编码颜色，也方便主题切换 -
color: #0d6efd—— 必须显式设文字色，否则继承父元素或默认白色，在浅边框上不可读 -
padding: .35em .6em—— 比原生.badge的.35em .65em略减水平内边距，防止边框撑宽后文字贴边
用 CSS 变量复用 Bootstrap 主题色
如果你项目已用 Sass 或支持 CSS 变量（Bootstrap 5.3+），别写死十六进制值。直接提取 --bs-primary-rgb 等变量，既能保持风格统一，又支持暗色模式自动适配。
- 安全写法：
background-color: rgba(var(--bs-primary-rgb), 0.1) !important（半透底色） +border-color: var(--bs-primary) - 不推荐：
color: var(--bs-primary)—— 因为.badge默认设color: #fff，CSS 变量不会自动 fallback，必须显式重置 - 暗色模式下，
:root[data-bs-theme="dark"]会更新--bs-primary，你的边框和文字色随之变化，无需额外媒体查询 - 注意：
--bs-badge-bg是只读变量，改它不影响 outline 类型徽章，仅用于填充型 badge
圆角、尺寸和响应式要注意什么
.badge 的 border-radius 和 padding 在不同断点有细微差异，直接覆盖时容易漏掉小屏表现；加边框后 pill 形状也容易失真。
- 胶囊形必须用
.rounded-pill（.badge-pill已废弃），但加边框后需额外加border-radius: 999px保形，否则圆角会被边框截断 - 小屏（
xs）下原生padding是.25em .5em，大屏是.35em .65em；若统一修改，建议写无媒体查询规则，避免断点回退 -
.badge-sm不是 Bootstrap 内置类，如需小号徽章，得自己定义font-size: .625em并同步调padding和border-radius - 移动端高 DPI 屏上，
1px边框可能模糊，可试border: .5px solid，但 Safari 旧版会四舍五入成1px，实测为准
实际生效的关键就两点：显式重置 background-color 并加 !important，以及手动补全 padding 和 border——漏掉任一都可能让徽章看起来“没边框”或“文字被切”。
