胶囊按钮需设border-radius等于高度一半（如高40px则设20px），配合height与padding控制尺寸和居中，禁用line-height；描边需box-sizing:border-box；伪元素热区扩展须设pointer-events:none。
怎么用 border-radius 实现真正胶囊形状
胶囊按钮本质是「左右半圆 + 中间矩形」，关键不是随便设个大圆角，而是让水平方向圆角值等于按钮高度的一半。比如高 40px 的按钮，border-radius 必须设为 20px（或 50%），否则左右会塌陷或溢出。
常见错误是写成 border-radius: 8px —— 这只是普通圆角，不是胶囊；或者用 border-radius: 50% 却没限制宽高比，导致在窄按钮上变成椭圆。
- 推荐写法：
height: 40px; border-radius: 20px;（显式数值，可控） - 响应式写法：
border-radius: 50%;+ 确保height和min-width足够（例如min-width: 80px） - 避免用
em或rem设border-radius，容易因字体缩放失真
为什么 padding 和 line-height 要配合高度一起调
胶囊按钮文字居中不靠 line-height 垂直撑开，而靠 padding 和 height 共同约束。如果只设 line-height: 40px，文字会“浮”在中间但点击热区不对齐；若只设 padding 不控高，按钮高度会随文字行数膨胀。
- 正确组合：
height: 40px; padding: 0 24px;（左右留白，上下由 height 定死） - 禁用
line-height，除非你明确需要多行文字（此时胶囊形态已失效） - 图标+文字按钮需统一
vertical-align: middle，否则图标常偏下
伪元素实现带边框的胶囊按钮容易漏掉什么
纯色胶囊直接用背景色就行，但要加描边（如 border: 2px solid #007bff）时，必须注意：描边会撑大元素尺寸，导致实际宽度变宽、圆角计算错位。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 解决方法一：用
box-sizing: border-box（推荐，兼容性好） - 解决方法二：减小
width或padding补偿描边宽度（不推荐，维护困难） - 千万别用
outline模拟边框——它不占布局空间，圆角无效，且无法控制位置 - 深色主题下注意描边颜色对比度，
border-color: rgba(0,0,0,0.1)比纯黑更自然
移动端点击区域太小？::after 扩展热区别乱用
小胶囊按钮在手机上难点，有人用 ::after 伪元素放大点击区，但若没重置 pointer-events，会导致鼠标悬停样式错乱或透出背景。
- 安全做法：用
padding扩展本身热区（如padding: 12px 24px），再用height和line-height控制视觉高度 - 非要用伪元素：必须加
pointer-events: none;到::after，且z-index不要高于主元素 - iOS Safari 对
touch-action: manipulation支持更好，建议按钮加这个属性减少 300ms 延迟
胶囊按钮最易被忽略的是「状态一致性」：:hover、:active、:focus 下的 border-radius 值必须完全一致，哪怕只差 1px，动画过渡时也会出现棱角闪动。用 CSS 变量统一管理圆角值是最稳妥的做法。
