直接加border看不见边框是因为Bootstrap 5+的.badge默认未设border-style且background-color为实色填充，边框被背景覆盖；必须显式设置border-style、将background-color改为transparent或带透明度值、同步调整color与padding，并推荐使用CSS变量复用主题色。
为什么直接加 border 看不见边框
因为 Bootstrap 5+ 的 .badge 默认没设 border-style，且 background-color 是实色填充，边框即使写了也会被盖住。常见错误是只写 border: 1px solid red，结果什么也没出现。
-
background-color必须显式设为transparent或带透明度的值，否则边框被背景“吃掉” - 必须同时声明
border-style（如solid），光有border-width不生效 -
color得同步调整，否则文字可能和边框同色、看不清（比如浅边框配浅色文字） - 原生
.badge的padding是为无边框设计的，加边框后建议微增，例如从.35em .6em改为.4em .65em
用 CSS 变量复用主题色避免硬编码
Bootstrap 5.3+ 提供了 --bs-primary、--bs-success 等 CSS 变量，直接引用能保证风格一致，且主题切换时自动适配。
- 别写死
#0d6efd，改用border-color: var(--bs-primary) - 背景透明 + 边框色 + 文字色三者保持一致，推荐统一用
color: var(--bs-primary)，再配border: 1px solid currentColor - 如果项目用了 Sass，优先在变量层重定义
$primary，所有衍生样式（包括 badge）自动更新 - 注意：
--bs-primary-rgb是三元组，要用rgba(var(--bs-primary-rgb), 0.2)构造半透背景，不能直接给color
如何让 .badge 同时有背景色和边框色
想实现“浅蓝底 + 深蓝边”这类组合，不能靠叠加 .bg-primary 和 .border 类——前者会覆盖你自定义的 background-color，后者又没指定 border-color。
- 放弃预设背景类，用自定义 class 显式控制三者：
background-color、border、color - 示例写法：
.badge-bg-light-border-dark { background-color: #e6f0ff !important; border: 2px solid #0d6efd; color: #0d6efd; padding: .25em .5em; } - 如果非要保留
.bg-primary，就得用!important强制覆盖它的background-color声明，不推荐 - 暗色模式下记得加
@media (prefers-color-scheme: dark)重置颜色，否则边框可能消失
圆角、内边距和字体缩放容易被忽略的细节
改边框时若不调圆角和内边距，徽章会显得挤压或失衡；嵌入按钮或标题时，字号缩放还可能让边框看起来模糊或偏移。
-
border-radius默认是0.375rem，加边框后若想保持视觉协调，可同步微调，比如0.4rem - 小字号徽章（如
font-size: .75rem）配粗边框（如2px）易失真，建议边框宽度 ≤ 1.5px - 父容器若设了
font-size: 14px，徽章实际尺寸会变小，此时padding用em单位更稳，但border-width推荐用px避免缩放模糊 - 嵌套在
.btn里时，确保父元素有display: inline-flex或vertical-align: middle，否则边框上下不对齐
