胶囊按钮应使用 border-radius: 50%，因其始终使圆角半径等于宽高一半，确保左右呈半圆、上下圆角不显，适配各种尺寸；若用固定像素值需保证 height 显式设定且 ≥ 2×border-radius。
直接给按钮设置足够大的 border-radius，让左右两端完全圆角化，就能得到胶囊形状——关键不是“多大”，而是“左右半径之和等于高度”。
为什么 border-radius: 50px 有时不生效？
因为 border-radius 的生效前提是元素有明确的高度。如果按钮内容撑高、或使用了 line-height 而未设固定 height，实际高度可能小于你预设的圆角值，导致圆角被截断。
- 确保按钮有显式
height（如height: 44px），且border-radius至少为该值的一半 - 更稳妥写法是用百分比：
border-radius: 22px（对应 44px 高）或直接border-radius: 50% -
50%是最可靠的选择：它始终让水平方向圆角半径 = 宽度一半，垂直方向 = 高度一半；对等宽高矩形按钮，刚好生成完美胶囊
border-radius: 50% 在不同尺寸按钮上的表现
这个写法在非正方形按钮上依然有效，但需注意：当按钮宽度远大于高度时，50% 会让左右两端变成半圆形（即胶囊），上下边缘则因高度小而几乎不可见圆角——这正是我们想要的效果。
- 例如：
width: 160px; height: 40px; border-radius: 50%→ 左右各生成半径为 20px 的半圆，视觉上就是标准胶囊 - 若写成
border-radius: 20px，虽然数值相同，但一旦按钮高度动态变化（比如响应式中缩为 32px），圆角就会溢出或不闭合 - 避免混合写法如
border-radius: 20px / 10px，这会强制椭圆弧，破坏胶囊的饱满感
配合内边距与文字居中的常见陷阱
胶囊按钮常因 padding 设置不当导致文字偏上、点击热区错位，或圆角被内容“顶破”。
立即学习“前端免费学习笔记（深入）”；
- 优先用
height + line-height垂直居中，而非padding-top/padding-bottom，避免高度计算偏差 - 若必须用
padding，请确保height减去上下padding后 ≥ 2 ×border-radius，否则圆角会被压缩变形 - 别忘了重置默认
button的border和outline，否则可能看到双线或焦点环干扰胶囊轮廓
真正容易被忽略的是：当按钮使用 display: inline-block 或字体大小剧烈变化时，line-height 可能继承父级，导致实际高度浮动——这时 50% 仍可靠，但得确认计算依据的高度确实是你控制的那个值。
