必须加-webkit-appearance: none，否则ios safari中button等原生表单控件的border-radius无效；因其默认启用系统级样式（如-webkit-appearance: button），绕过css渲染层，导致圆角被强制覆盖。
-webkit-appearance: none 是必须加的，否则 border-radius 在 iOS Safari 里基本无效。
为什么 border-radius 设了却没圆角
iOS Safari 给 <button></button>、<input type="submit"> 等元素默认设了 -webkit-appearance: button。这个值会绕过 CSS 渲染层，直接调用系统级原生按钮样式——包括它自己定的圆角、内阴影、字体渲染。你写的 border-radius: 8px 或 border-radius: 0 全被忽略。
这个行为只在真机或 Safari 模拟器上触发；桌面 Chrome/Firefox/Edge 完全不受影响。
- 错误现象：按钮初始加载是大圆角，点一下突然变你设的圆角（或变直角）
- 常见场景：表单提交按钮、自定义
<input type="button">、H5 页面嵌入 WebView - 注意：Android WebView 和 Chrome for Android 不受影响，问题纯属 iOS Safari 特有
-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、甚至 focus 反馈。不手动补，按钮大概率塌陷、文字贴边、点击无反馈：
- 显式写
border：原生按钮有默认 border，清掉后若不补，看起来像“没边框” - 补
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一起用会导致背景色盖不住圆角边缘，留白边
Safari 15.4+ 能用 appearance: none 吗
可以，但仅限 Safari 15.4+；老版本（比如 iOS 15.0–15.3）仍需坚持用 -webkit-appearance: none。稳妥起见，建议双写：
button {
-webkit-appearance: none;
appearance: none;
border-radius: 8px;
}
调试时打开 Safari 开发者工具 → “Computed” 面板，搜 appearance，确认值是 none 而非 button；再看 border-radius 的 computed 值是不是你设的数字（比如 8px），而不是 0px。如果还是不对，关掉父级的 transform、clip-path、overflow，它们都可能干扰圆角渲染。
最常被忽略的是：加了 -webkit-appearance: none 却没补 padding 或 border，结果按钮“看起来没变化”，其实是塌了——不是圆角没生效，是按钮本身没撑开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
