ios safari 中 border-radius: 0 对表单按钮无效，因 -webkit-appearance: button 强制走原生渲染，跳过 css 圆角计算；需统一设 -webkit-appearance: none 才能生效。
为什么 border-radius: 0 单独写没用
iOS Safari 对 <input type="submit">、<button></button> 等元素默认启用 -webkit-appearance: button，这会让渲染引擎跳过 CSS 的圆角计算，直接走系统原生控件绘制逻辑。此时你写的 border-radius: 0 根本不进样式计算流程——不是“没生效”，而是“压根没被读取”。
-webkit-appearance: none 必须加，且要加在所有相关元素上
这是解耦的第一步，不加它，后面所有样式都是白忙活：
-
<input type="submit">、<input type="reset">、<input type="button">都要覆盖 -
<button></button>不能漏，哪怕没写type属性，默认也是submit -
<input type="search">和<select></select>同样受干扰，需一并处理 - 老版本 Safari（-webkit-appearance: none，纯
appearance: none会失效
加完 -webkit-appearance: none 后按钮“塌了”或“没反馈”怎么办
清掉原生样式 = 清掉默认 border、padding、line-height、font、outline 和 cursor。必须手动补全：
- 显式声明
border：比如border: 1px solid #ccc，否则视觉上像“消失”了 - 补
padding或line-height：尤其对<input>，否则文字上下紧贴边界，在 iOS 上特别扎眼 - 别用
outline做焦点反馈：它的虚线框不遵循border-radius，点击时直角轮廓明显；建议改用box-shadow: 0 0 0 2px #007bff - 检查父级
overflow：若设了overflow: hidden，可能把刚做好的圆角裁掉
圆角还是“不够圆”？两个隐藏干扰源
即使 -webkit-appearance: none 和 border-radius: 8px 都写了，视觉仍可能偏方，常见原因：
- 边框太粗：
border-radius实际生效上限是min(设定值, border-width / 2)。例如border: 4px solid #000，那border-radius: 8px才勉强达标；设成4px几乎看不出效果 - 内容溢出：
::before、图标、长文字或transform定位的子元素超出容器，会“撑破”圆角；确认父级有overflow: hidden，且子元素未绕过裁剪
-webkit-appearance 行为，问题只在真机或 Xcode 模拟器里暴露。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
