CSS圆角实现的胶囊按钮样式_高度一半的radius设置

胶囊形需左右圆角半径等于元素高度一半且不超宽度一半，优先用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 默认值。