Bootstrap 5 中徽章默认为矩形，添加 .badge-pill 类可变为胶囊形；.badge-rounded 是误传已移除，不可用；直接修改 border-radius 易导致响应异常、文字裁切及可访问性问题。
如何用 Bootstrap 5 控制徽章是方角还是圆角
bootstrap
5 的徽章默认是矩形（带小圆角），想改成更圆润的“胶囊形”，不能靠自定义
覆盖，得用框架内置的修饰类。核心就两个：不加修饰是矩形，加
是胶囊形——注意，
是旧资料误传，bootstrap 5 官方已移除该类，实际有效且唯一支持的形状修饰符只有
。
矩形徽章（默认）：
胶囊形徽章（推荐用于计数场景）：
会同时增大水平内边距和圆角半径，视觉上更饱满，但不会改变垂直高度逻辑——它仍依赖父元素行高，不是固定尺寸
别试图用
或
覆盖，它们可能破坏徽章的垂直居中或导致文字溢出
为什么直接改 CSS 圆角容易出问题
徽章的尺寸、内边距、字体大小全由 em 单位驱动，和父元素
强关联。硬写
或
会导致：
在不同字号上下文（如按钮里 vs 普通段落里）表现不一致
文字被裁切（尤其小屏幕下，
不足时）
辅助技术（如屏幕阅读器）无法感知形状变化，而语义上你只是想表达“这是个计数”，不是“这是个圆形”
和
颜色类组合时，背景色填充可能不均匀（因 padding 计算错位）
徽章形状和使用场景怎么匹配
选矩形还是胶囊形，本质是信息密度和交互意图的问题：
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
状态提示（如 “Draft”、“Online”）→ 用默认矩形，轻量、不抢眼
数字计数（如通知数、购物车数量）→ 必用
，视觉上更像“可点击的容器”，用户直觉更强
嵌入按钮时（
），
能更好贴合按钮圆角，避免生硬直角拼接
如果需要更细粒度控制（比如比
更圆一点），应重写整个徽章组件，而不是局部 hack 圆角——因为 Bootstrap 5 已不再提供中间档形状类
兼容性和未来风险提醒
目前所有稳定版 Bootstrap 5.x（包括 5.3.x）都只认
。但要注意：
Bootstrap 6 尚未发布，但设计文档已明确将废弃
，改用
/
+ 新的
（尚未实装）。所以现在写死
属于短期安全、中期需适配的方案
如果你项目用了 Sass，可通过覆盖
和
变量来统一调整，比全局 CSS 更可控
别忽略空徽章隐藏逻辑：
在 Bootstrap 5 中依然生效，但前提是徽章节点真为空——带空格或换行符都会让它“不空”，导致空白占位
形状这事看着小，但改得随意就容易牵扯到布局流、可访问性、版本升级成本——最稳的路，就是信官方类，少手抖。
border-radius.badge-pill.badge-rounded.badge-pill55.badge-pill.rounded-pill.rounded-circlefont-sizeborder-radius: 50%2rempadding.bg-*.badge-pill.badge-pill.badge-pill.badge-pill.badge-pill.badge-lg.badge-sm.badge-rounded.badge-pill$badge-pill-padding-x$badge-pill-border-radius.badge:empty