ios safari 中按钮默认圆角是因 -webkit-appearance: button 强制启用原生样式，需显式设 -webkit-appearance: none 和 appearance: none 才使 border-radius 生效，并注意补边框、内边距及避免父容器 overflow: hidden 等干扰。
为什么 iOS Safari 里按钮自己变圆角了
不是你写的 border-radius 生效了，而是 Safari 给 <button></button> 和 <input type="button"> 默认加了 -webkit-appearance: button —— 这个值会强制启用系统原生按钮样式，包括它自己定的圆角、内阴影、字体渲染，完全绕过你的 CSS。你设 border-radius: 0 也没用，因为圆角根本不在 CSS 渲染层里画。
怎么让 border-radius 真正生效
必须加 -webkit-appearance: none，老版本 Safari（15.4 之前）只认带前缀的写法；Safari 15.4+ 才支持无前缀 appearance: none，但为保险起见，还是写全：
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
-webkit-appearance: none;
appearance: none;
}
加完之后注意三件事：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 显式补
border：原生按钮有默认边框，清掉后若不补，可能看起来“没边框” - 补
padding或line-height：尤其对<input>类型，否则文字容易上下贴边 - 确认父容器没设
overflow: hidden：它会把圆角裁掉，导致视觉上仍是直角
哪些地方容易漏掉 -webkit-appearance: none
不只是 <button></button>，所有可能被 Safari 当作“原生表单控件”的元素都得覆盖：
-
<select></select>、<textarea></textarea>、<input type="text">—— 如果你也想自定义它们的圆角或边框，一并加 - 伪类里别漏：比如
button:active里重设了border-radius，但基础选择器没声明-webkit-appearance: none，照样无效 - UI 框架用户注意：Bootstrap、Ant Design 等常重置表单控件样式，需确保你的
-webkit-appearance: none优先级足够高（比如加!important或用更具体的选择器）
加了 -webkit-appearance: none 后还圆角失效？检查这些
真机或 Safari 模拟器上调试时，重点看两处：
- 选中按钮 → “Computed” 面板 → 搜索
appearance，确认值是none，不是button - 同个面板里看
border-radius的 computed 值是不是你设的数字（比如8px），而不是0px - 如果还是不对，逐条关掉父级的
overflow、transform、clip-path—— 它们都可能干扰圆角渲染 - 别和
background-clip: border-box一起用：会导致背景色盖不住圆角边缘，留白边
最常被忽略的是：加了 -webkit-appearance: none 后，outline 的绘制不遵循 border-radius，点击时可能出现直角虚线框；建议用 box-shadow: 0 0 0 2px #007bff 替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
