胶囊形需左右圆角半径等于元素高度一半且不超宽度一半，优先用border-radius:50%配合严格一致的height与line-height，或用999px适配宽高悬殊场景。
border-radius 设为 height 一半时为啥没变胶囊形
常见错误是直接写 border-radius: 50% 却没配对宽高，或用了固定像素值但没对齐元素实际高度。胶囊形本质是左右半圆 + 中间矩形，关键在于左右两侧的圆角半径必须等于元素高度的一半，且不能超过宽度一半，否则会塌陷成椭圆或溢出。
- 用
border-radius: 50px前先确认元素height确实是100px，否则圆角会“超纲” - 更稳妥写法是
border-radius: calc(50% - 1px)（防 Safari 渲染抖动）或直接border-radius: 50%配合height和line-height严格一致 - 如果按钮含内边距（
padding），height必须是内容区高度（不含 padding），否则 radius 会基于总高度计算，导致左右圆角被“拉扁”
flex 布局下 button 高度不固定时怎么保胶囊形
当按钮文字换行、字体缩放或响应式变化导致 height 动态变化时，写死像素 radius 必然失效。此时必须依赖相对单位或 CSS 自适应能力。
- 优先用
border-radius: 50%—— 它始终按盒模型的宽高最小值计算，只要按钮是近似方形（宽 ≥ 高），就能稳住胶囊形 - 若按钮宽度远大于高度（比如长文本按钮），
50%会让左右圆角过大，此时改用border-radius: 999px（足够大，视觉上等效于半圆，且不依赖具体尺寸） - 避免在
display: flex容器里对 button 设align-items: center同时又设height，容易触发浏览器重排导致高度计算偏差
移动端 iOS Safari 圆角渲染异常的修复点
iOS 15+ 的 Safari 对 border-radius + overflow: hidden 组合有渲染 bug：圆角边缘可能锯齿、闪烁，或内部文字被意外裁切。这不是样式写错，而是渲染管线问题。
- 加
-webkit-mask-image: linear-gradient(#fff, #fff)强制启用硬件加速（小技巧，不改变视觉） - 避免同时设置
border-radius和transform: translateZ(0)，后者会干扰圆角合成 - 如果按钮有背景渐变，别用
background-clip: padding-box，改用background-clip: border-box防止 Safari 把圆角当边界裁掉
button 元素与 div 实现胶囊按钮的关键差异
用 <div> 模拟按钮时，<code>border-radius 行为和原生 <button></button> 一样，但交互状态（如 :active 压感、焦点管理、可访问性）会丢失。而原生 button 在某些浏览器中默认有 appearance: button，可能覆盖你的 radius。
立即学习“前端免费学习笔记（深入）”；
- 务必重置
-webkit-appearance: none和appearance: none，否则 Chrome/Firefox 可能忽略border-radius - 如果按钮内含图标（
<svg></svg>），确保 svg 本身没有viewBox导致缩放失真，进而影响整体高度判断 - 不要给 button 设
vertical-align: middle，它会偷偷改变基线位置，让 height 计算偏移，radius 就不准了
事情说清了就结束。真正卡住人的，往往不是 radius 值本身，而是 height 怎么来的、谁在改它、以及那个看不见的 appearance 默认值。
