Bootstrap 5 中直接使用 .rounded-pill 类即可实现椭圆形按钮，需配合 btn 基础类（如 btn btn-primary），其内部采用 border-radius: 50rem 确保两端恒为半圆，适配所有尺寸且响应式可靠。
Bootstrap 按钮怎么用
实现椭圆形？
直接结论：
bootstrap
5 原生支持椭圆形按钮，核心就是加
类 —— 它不是“圆角矩形”，而是专为药丸状（即两端半圆、中间等宽）设计的语义化类，比手动写
更可靠。
常见错误是误用
（强制全图/全按钮变正圆，会压扁宽按钮）或
（只给普通圆角，不够“椭”）。而
内部用的是
，足够大，能确保任意宽高比下两端都撑成半圆。
必须配合按钮基础类使用，比如
，单独加
无效
如果按钮文字太长导致宽度远大于高度，
依然生效，两端仍是半圆，中间是直边 —— 这正是“药丸”本意
不要和
或
混用，否则可能在小屏上触发意外换行，破坏椭圆形态
为什么不用自定义
？
手动写
看似简单，但实际容易翻车：
20px 在高按钮上显得圆角不足，在矮按钮上又可能溢出（比如高度仅 24px 时，
会导致上下边被裁掉）
响应式失效：PC 上看着好，手机横屏时按钮高度变化，固定像素值就失配
和 Bootstrap 主题脱节：深色模式切换、按钮尺寸类（
/
）不会自动适配你的硬编码值
是 Bootstrap 内置的响应式方案 —— 它不依赖具体像素，靠极大 rem 值兜底，适配所有标准按钮尺寸。
遇到按钮还是方的？检查这三点
加了
却没效果，大概率是以下原因：
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
忘记加
基础类（Bootstrap 5 不再默认给
基础样式，必须显式声明）
CSS 覆盖：项目里有全局重置如
，会干掉
用了
但没设
或类似行为（极少见，但旧版兼容层可能影响）
快速验证：打开浏览器开发者工具，看元素 computed 样式中
是否为
，如果不是，说明被覆盖了。
想微调椭圆“胖瘦”程度？别改类，改按钮本身
本身不可配置粗细 —— 它的设计哲学是“统一视觉节奏”。真要更“扁”或更“厚”，应该调整按钮的
和
：
要更扁平（像胶囊）：用
+
，或手动减
/
要更饱满（像水滴）：用
+
，或增
让高度拉大
切忌用
替代——它在不同尺寸下表现不一致，且破坏框架语义
真正难处理的其实是图标按钮（比如带
的圆形操作按钮），那种场景
会显得过长，这时才该切到
并严格控制宽高比。椭圆 ≠ 万能，它只在“文本按钮需柔和收边”时最自然。
.rounded-pill.rounded-pillborder-radius: 50px.rounded-circle.rounded.rounded-pillborder-radius: 50rembtn btn-primary.rounded-pill.rounded-pill.btn-blockwidth: 100%border-radiusstyle="border-radius: 20px"border-radius: 20px.btn-lg.btn-sm.rounded-pill.rounded-pill.btnbutton { border-radius: 0 !important; }.rounded-pilldisplay: inline-blockborder-radius50rem.rounded-pillheightpadding.btn-sm.rounded-pillpadding-toppadding-bottom.btn-lg.rounded-pillpaddingborder-radius: 100px+.rounded-pill.rounded-circle