答案是因ios safari默认启用-webkit-appearance: button，跳过css渲染层直接调用系统原生绘制逻辑，导致border-radius: 0被忽略；必须同时设置-webkit-appearance: none和appearance: none，并手动补全border、padding、background-color等样式。
为什么border-radius: 0在 iOS Safari 里不生效
不是你写错了，是 WebKit 根本没走 CSS 圆角渲染这一步。button 和 input[type="submit"] 在 iOS Safari 中默认被赋予 -webkit-appearance: button，它会跳过 CSS 层，直接调用系统原生按钮绘制逻辑——圆角、内阴影、高亮反馈全由系统控制，border-radius 被无视。只有真机或 Safari 模拟器能复现，桌面浏览器完全不受影响。
-webkit-appearance: none 必须和 appearance: none 一起写
单独写任一属性都不可靠：
-
-webkit-appearance: none缺失 → iOS 15.4+ 仍保留圆角 -
appearance: none单独存在 → Safari 15.3 及更早版本完全忽略 - 顺序必须是
-webkit-appearance在前，appearance在后，否则部分旧版 Safari 不识别
正确写法：
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
textarea {
-webkit-appearance: none;
appearance: none;
}
重置后必须手动补全的样式项
-webkit-appearance: none 不是“设个圆角”，而是把按钮打回原始 DOM 元素状态：清掉 border、padding、line-height、outline、cursor，甚至 background 和 font 渲染逻辑。漏补就会出问题：
- 不设
border或background-color→ 按钮透明或变白，点不着 - 不设
padding或line-height→ 文字上下贴边，尤其input类型最明显 - 不加
cursor: pointer→ 点击时无视觉反馈，用户以为点不动 - 父容器有
overflow: hidden→ 即使圆角生效也会被裁掉，记得确认overflow: visible
别踩这些兼容性坑
常见误操作背后都有明确原因：
-
border-radius: none→ 无效，iOS 只认数值，比如0或8px - 只给
button加重置，漏掉input[type="submit"]→ 表单提交按钮依然圆角 - 在
button:active里设border-radius，但基础选择器没加-webkit-appearance: none→ 伪类根本不会触发 - 和
background-clip: border-box一起用 → 背景色盖不住圆角边缘，留白边
验证是否生效，打开 Safari 开发者工具，选中按钮，在 “Computed” 面板查 appearance 值是不是 none，而不是 button；再看 border-radius 的 computed 值是否为你写的数字。如果还是圆角，优先检查父级 overflow、transform 或 clip-path 是否干扰了渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
