必须加-webkit-appearance: none，否则ios safari中border-radius对button等原生表单控件无效，因其默认-appearance: button强制启用系统级圆角，绕过css渲染层；需同时补全border、padding、line-height等基础样式。
-webkit-appearance: none 是必须加的，否则 border-radius 在 iOS Safari 里大概率失效。
为什么 border-radius 设了却没用
iOS Safari 给 <button></button> 和 <input type="button"> 默认加了 -webkit-appearance: button，这个值会强制启用系统原生按钮样式——包括它自己定的圆角、内阴影、字体渲染，完全绕过你的 CSS。
即使你写了 border-radius: 0，它也不理，因为圆角是“原生控件层”画的，不是 CSS 渲染层控制的。
- 只在真机或 Safari 模拟器上复现，桌面 Chrome / Firefox / Edge 都不触发
- Android WebView、Chrome for Android 不受影响
-
appearance: none（无前缀）在 Safari 15.4+ 才支持，老版本必须用-webkit-appearance: none
哪些元素要加 -webkit-appearance: none
不只是 <button></button>，所有可能被 Safari 当作“原生表单控件”处理的元素都得覆盖：
-
<button></button>—— 最常见，必加 -
<input type="button">、<input type="submit">、<input type="reset">—— 同样有默认 appearance -
<select></select>、<textarea></textarea>、<input type="text">—— 如果你也想自定义它们的圆角/边框，一并加 - 别漏掉伪类：比如
button:active里如果重设了border-radius，也要确保-webkit-appearance: none在基础选择器里已声明
加了 -webkit-appearance: none 后要注意什么
它会把原生样式全干掉，所以你得手动补全一些基础样式，否则按钮可能塌陷、文字错位、点击反馈消失：
- 显式设置
border：原生按钮有默认 border，清掉后若不补，可能看起来“没边框” - 补
line-height或padding：避免文字上下贴边（尤其<input>类型） - 确认
overflow: visible：某些父容器设了overflow: hidden，会把圆角裁掉 - 慎用
outline：它的绘制不遵循border-radius，点击时可能出现直角虚线框；建议用box-shadow: 0 0 0 2px #007bff替代 - 别和
background-clip: border-box一起用：会导致背景色盖住圆角边缘，留白边
兼容性与调试技巧
在 Safari 开发者工具里检查是否生效，关键看两点：
- 选中按钮 → “Computed” 面板 → 搜索
appearance，确认值是none，不是button - 同个面板里看
border-radius的 computed 值是不是你设的数字（比如8px），而不是0px - 如果还是圆角，打开“Styles”面板，逐条关掉父级的
overflow、transform、clip-path，它们都可能干扰圆角渲染 - 真机调试比模拟器靠谱：Safari 的响应式模拟有时不触发原生 appearance 行为
最常被忽略的是：加了 -webkit-appearance: none 却忘了重设 border 或 padding，结果按钮看起来“变矮了”或“文字偏下”，误以为是圆角问题。其实圆角早生效了，只是你没看见——它被内容撑变形了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
