必须加 -webkit-appearance: none，否则 iOS Safari 会使用系统原生按钮渲染逻辑，忽略 border-radius；需覆盖 button、input[type] 等所有原生控件，并手动补全 border、padding、outline 等样式。
-webkit-appearance: none 是必须加的，否则 border-radius 在 iOS Safari 里基本无效
为什么 border-radius 设了却没圆角
iOS Safari 给 <button>、<input type="submit">、<input type="button"> 等元素默认设了 -webkit-appearance: button。这个值会跳过 CSS 渲染层，直接调用系统原生按钮绘制逻辑——包括它自己定的圆角、内阴影和字体渲染。你写的 border-radius: 8px 或 border-radius: 0 全被忽略。
这种行为只在真机或 Safari 模拟器上触发；桌面 Chrome/Firefox/Edge 和 Android WebView 都不受影响。
- 常见错误现象：按钮初始加载是大圆角，点一下突然变你设的圆角（或变直角）
- 典型场景：H5 表单提交按钮、自定义
<input type="button">、WebView 嵌入页 -
appearance: none（无前缀）仅在 Safari 15.4+ 支持，老版本必须用带前缀写法
哪些选择器必须加 -webkit-appearance: none
不能只写 button { -webkit-appearance: none } 就完事。Safari 会对所有“可能被识别为原生控件”的元素启用默认 appearance，所以得覆盖全：
立即学习“前端免费学习笔记（深入）”；
-
button—— 最高频，必加 -
input[type="button"]、input[type="submit"]、input[type="reset"]—— 同样默认buttonappearance -
select、textarea、input[type="text"]、input[type="search"]—— 如果你也想自定义它们的圆角/边框，一并加 - 别漏伪类：
button:active里重设了border-radius？那基础选择器里必须已声明-webkit-appearance: none，否则伪类不生效
加了 -webkit-appearance: none 后必须手动补哪些样式
它会清掉所有原生样式：默认 border、padding、line-height、font、outline，甚至 cursor 和 focus 反馈。不手动补，按钮大概率塌陷、文字贴边、点击无反馈：
- 显式写
border：比如border: 1px solid #ccc，否则看起来像“没边框” - 补
padding或line-height：尤其对input类型，否则文字上下紧贴边缘 - 设
overflow: visible：父容器若含overflow: hidden，会把圆角裁掉 - 慎用
outline：它的虚线框不走border-radius，点击时出现直角轮廓；建议用box-shadow: 0 0 0 2px #007bff替代 - 避开
background-clip: border-box：和-webkit-appearance: none一起用会导致背景色盖不住圆角边缘，留白边
圆角还是不明显？两个常见干扰源
即使 -webkit-appearance: none 和 border-radius 都写了，视觉上仍可能“不够圆”，大概率是以下原因：
- 边框太粗：实际生效的圆角半径上限是
min(设定值, border-width / 2)。例如设了border: 2px solid #000，那border-radius: 4px几乎看不出效果，至少得设到8px以上 - 内容溢出：图标、文字、伪元素（如
::before）超出容器边界，会“撑破”圆角视觉；务必确认父级有overflow: hidden，且子元素未用position: absolute或transform绕过裁剪
调试时打开 Safari 开发者工具，检查“Computed”面板中 appearance 是否为 none、border-radius 的 computed 值是否是你设的数字——这两个才是真实生效的关键信号。
