border-radius百分比值分别参考容器宽度和高度：水平方向用宽度百分比，垂直方向用高度百分比；正方形下50%得圆角，宽高不等时呈椭圆弧，是实现响应式圆角的关键机制。
border-radius百分比值到底参考谁？
百分比不是随便写的，border-radius 的百分比值分别参考**宽度**和**高度**：水平方向（左上、右上、右下、左下）用容器宽度的百分比，垂直方向对应用容器高度的百分比。比如 border-radius: 50% 在正方形元素上才得到真圆角；宽高不等时，会变成椭圆弧——这正是实现“响应式圆角”的关键机制。
- 当按钮宽高相等（如
width: 100px; height: 100px;），border-radius: 50%→ 完美圆形按钮 - 当按钮是横向长矩形（如
width: 200px; height: 40px;），border-radius: 50%→ 水平半径 = 100px，垂直半径 = 20px → 两端是饱满的半椭圆，视觉上就是“圆角矩形” - 若写成
border-radius: 20px（固定像素），缩放屏幕时圆角大小不变，容易在小屏上显得突兀或大屏上过于生硬
响应式圆角按钮的最小可行写法
不用媒体查询也能响应，靠的是百分比 + 相对单位组合。核心是让按钮尺寸本身可伸缩，再让 border-radius 跟着它“按比例呼吸”。
.btn {
padding: 0.75em 1.5em;
font-size: clamp(0.875rem, 4vw, 1.125rem);
border-radius: 50%;
/* 不要设固定宽高，让内容撑开或用 max-width */
}
-
padding用em，随字体缩放，圆角弧度自然适配 -
font-size用clamp()，保证文字始终可读，同时驱动整体尺寸变化 -
border-radius: 50%是最稳妥选择：窄按钮变胶囊形，宽高近似时趋近圆角矩形，极端宽时两端仍是协调的弧线 - 避免写
width: 100%+border-radius: 50%在父容器窄时导致圆角被裁切（尤其是 flex 容器中）
移动端点击区域太小？别只调 padding
视觉圆角看着舒服，但手指点不准就白搭。iOS 和 Android 对 :active 状态有延迟或样式弱化，单纯加大 padding 可能破坏布局流。更直接的办法是扩大点击热区而不改变外观：
- 给按钮加
min-height: 44px（iOS 推荐最小触控高度） - 用
touch-action: manipulation减少移动端 300ms 延迟 - 如果按钮内嵌图标，确保图标容器也参与点击：不要只给
<span></span>设click事件，而是整个<button></button>可点 - 慎用
border-radius: 9999px—— 浏览器仍按宽高计算，但语义混乱，调试时难定位问题
兼容性与 Safari 的一个隐藏坑
所有现代浏览器都支持百分比 border-radius，但 Safari（尤其 iOS 15.4 之前）在配合 transform: scale() 或某些 flex 布局时，可能把百分比解析为相对于父容器而非自身尺寸。这不是 bug，是渲染顺序差异。
- 验证方式：给按钮加
outline: 1px solid red，看圆角是否贴合 outline 边框 - 绕过办法：避免在按钮上同时使用
transform和百分比border-radius；改用scale()包裹外层<div> <li>真正需要“绝对圆角”（如头像按钮），优先用 <code>border-radius: 50%+ 正方形容器（aspect-ratio: 1），比百分比更可控
实际项目里，圆角是否“响应”，不取决于单个属性，而在于它如何与尺寸、排版、交互反馈联动。百分比只是起点，真正卡住进度的往往是那个没设 min-height 的按钮，或者 Safari 里多了一层 transform 的 wrapper。
