胶囊按钮的border-radius必须等于height的一半，如height:40px则设border-radius:20px或50%（需宽高比稳定）；禁用line-height居中，改用height与padding组合；加border时必设box-sizing:border-box；伪元素扩展热区需加pointer-events:none。
border-radius 必须等于 height 的一半，不是随便设个大数值
胶囊按钮的圆角不是“越圆越好”，而是有严格数学关系：左右两端必须是半圆，所以 border-radius 值必须等于按钮高度的一半。比如 height: 40px，就要写 border-radius: 20px 或 border-radius: 50%（后者需确保宽高比稳定）。
常见错误：
- 写成 border-radius: 8px → 只是普通圆角，不是胶囊
- 写成 border-radius: 50% 但没控宽高比 → 窄按钮变成椭圆
- 用 em 或 rem 单位 → 字体缩放时圆角失真
推荐写法：
- 显式数值更可控：height: 32px; border-radius: 16px;
- 响应式场景可用 border-radius: 50%，但必须搭配 min-width: 64px 防窄塌
加 border 描边时，box-sizing: border-box 是刚需
一旦加了 border，比如 border: 2px solid #007bff，元素实际尺寸会变大，导致圆角接缝错位、宽度溢出容器。这不是 bug，是盒模型默认行为。
必须加这一句：
- box-sizing: border-box —— 让 border 和 padding 都算在 width/height 里
- 别用 outline 模拟边框 —— 它不占布局空间，border-radius 对它无效
如果漏掉 box-sizing：
- 圆角看起来“被切了一刀”
- 多个按钮并排时宽度不一致
- flex 布局下容易换行或挤压
文字居中靠 padding + height，别依赖 line-height
胶囊按钮里文字垂直居中，靠的是 height 和 padding 共同约束，不是靠 line-height 撑开。后者会让文字“浮”在视觉中间，但点击热区和文字基线不对齐。
正确组合：
- height: 32px;
- padding: 0 20px;（上下为 0，左右留白）
- line-height: normal;（显式重置，避免继承干扰）
例外情况：
- 图标+文字按钮要加 vertical-align: middle，否则图标常偏下
- 多行文字已破坏胶囊形态，此时不应再强求 capsule 视觉
伪元素扩展热区或描边时，pointer-events: none 别漏
用 ::before/::after 画左右半圆或扩点击区域，伪元素默认不响应点击。即使盖住了按钮边缘，click 事件仍只触发到主元素内容区。
解决方案：
- 主元素设 position: relative
- 伪元素加 pointer-events: none → 点击穿透到底层主元素
- 同时确保主元素有足够 padding 或 width/height 定义热区大小
容易忽略的点：
- 伪元素没设 content: "" → 不渲染，白写
- 忘了 overflow: hidden → 伪元素超出导致接缝露白边
- Safari 下 subpixel 渲染让左/右边界落在 0.5px 位置 → 边缘轻微模糊，用 border-radius: 999px 更鲁棒
真正做出来一个靠谱的胶囊按钮，难点不在“怎么画圆角”，而在于 height、border-radius、box-sizing、padding 这四者的数值咬合关系。少一个，边缘就断；多一个，热区就偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
