border-radius: 8px 是最稳妥的起点，因适配 ios 原生按钮、android material 3 规范及主流 dpr 屏幕；小按钮（≤120px）用 6–7px，禁用百分比和 em，优先固定像素，无需媒体查询适配圆角。
移动端圆角按钮的 border-radius 像素值怎么选？
直接说结论：在主流 iOS 和 Android 设备上，border-radius: 8px 是最稳妥的“视觉上完美”的起点，不是靠猜，而是基于系统默认控件和物理像素密度的折中结果。
原因很简单：iOS 的原生按钮圆角约 8px（@2x 下对应 16px 物理像素），Android Material 3 推荐按钮圆角为 8dp，而现代中高端手机屏幕 dpr 多为 2 或 3，8px 在 CSS 像素层面既能避免过钝（4px 显尖），又不会过软（12px 在小按钮上易糊边或吞文字）。
- 按钮宽度 ≤ 120px 时，优先用
border-radius: 6px或7px，防止圆角侵占太多可点击区域 - 若按钮含图标+文字，且高度为
44px（iOS 最小触控区），border-radius: 8px正好与上下留白协调 - 别用百分比（如
50%），它在非正方形按钮上会出椭圆，也不符合设计系统规范
为什么 border-radius: 0.5em 在移动端经常翻车？
em 单位依赖父元素 font-size，而移动端页面常存在 viewport 缩放、动态字体调整（如微信内置浏览器强制重设 root font-size）、甚至用户开启“更大字体”辅助模式——这时 0.5em 可能从预期的 8px 变成 10px 或 6px，圆角突然变胖或变瘦，UI 失控。
- 真要用相对单位，改用
rem并严格锁定根字号（例如html { font-size: 16px; }），但依然不如固定像素可控 - 某些安卓 WebView 对
em解析有微小舍入误差，border-radius在 1px 边界附近容易出现半像素渲染（模糊或断线） - 设计稿标注是
8px，就写8px，别“转译”成其他单位——CSS 就是像素语言，尤其在 UI 控件层
高 DPR 屏幕下，border-radius 还需要做媒体查询适配吗？
不需要。CSS 的 px 是逻辑像素，浏览器自动按设备 dpr 缩放绘制，border-radius: 8px 在 iPhone 14（dpr=3）上实际走 24 物理像素抗锯齿路径，在 Pixel 7（dpr=2.8）上也由渲染引擎平滑处理。强行加 @media (-webkit-min-device-pixel-ratio: 2) 去改 border-radius，反而破坏一致性。
- 唯一要干预的是边框：如果用了
border: 1px solid #ccc，高 DPR 下可能发虚，此时应改用transform: scaleY(0.5)或box-shadow模拟，但圆角本身不用动 - 真正影响“像素完美”的是按钮内部文字的
font-size和line-height，它们才需要针对 dpr 做细调（例如用min-resolution: 2dppx微调字号） - 测试时别只看 Chrome DevTools 的模拟器，真机连 Safari Web Inspector 或 Chrome Remote Debugging 才看得清 subpixel 渲染是否均匀
按钮激活态（:active）的圆角要不要变化？
不要变。任何在 :active 中修改 border-radius 的行为，都会触发重排（reflow），导致点击瞬间轻微“抖动”，尤其在低端安卓机上明显。视觉反馈应靠背景色、阴影或缩放（transform: scale(0.98)）实现。
- 如果设计要求“按下变方角”，那是反直觉的交互，用户会误判状态；系统级按钮（如 iOS 键盘按键）按下时圆角保持不变
- 可用
transition: background-color 0.15s, transform 0.1s配合will-change: transform保帧率，但避开border-radius动画 - 圆角是形状锚点，锚点一动，整个按钮的视觉重心就飘了——这不是像素问题，是认知负荷问题
height: 44px 搭配 border-radius: 8px 是经过千万次触摸验证的组合，换掉任意一个，都得重新验证整条交互链路。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
