必须加-webkit-appearance: none和appearance: none，否则ios safari中button等表单控件的默认圆角无法被border-radius: 0清除；重置后需手动补全border、padding、background-color等基础样式。
iOS Safari 中 button 默认圆角无法用 border-radius: 0 彻底清除
在 iOS Safari（尤其是 iOS 15.4+）中，<button></button> 元素即使设置了 border-radius: 0，仍会残留轻微圆角（约 2–4px），这是 WebKit 对表单控件的「视觉增强」策略，仅靠常规 CSS 无法覆盖。真正起效的是重置其底层渲染行为。
appearance: none 必须配合 -webkit-appearance: none
WebKit 浏览器（包括 iOS Safari）要求显式声明前缀版本才能生效，仅写标准属性会被忽略：
button {
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
- 缺
-webkit-appearance: none→ 圆角照旧，appearance: none不触发 - 只写
-webkit-appearance: none→ 现代浏览器兼容性差（如 Chrome 100+ 已弃用前缀但未完全移除） - 必须两者共存，且
-webkit-在前
重置后需手动补全基础样式
appearance: none 会剥离所有原生按钮默认样式（背景、边框、文字颜色、内边距等），不补全会导致按钮“消失”或布局错乱：
- 必须显式设置
background-color和border，否则按钮透明不可见 - 需重新定义
padding，iOS 原生按钮有较大内边距，清空后文字会贴边 - 建议加
cursor: pointer，否则点击态无反馈 - 若用在表单中，注意
type="button"避免意外提交
遇到 input[type="button"] 或 input[type="submit"] 怎么办
这些 input 元素同样受 WebKit 圆角影响，但 appearance: none 对它们的支持更不稳定：
- iOS 16+ 支持
input[type="button"]的-webkit-appearance: none -
input[type="submit"]在部分 iOS 版本中仍强制圆角，可靠解法是改用<button type="submit"></button> - 若必须用
input，可尝试-webkit-border-radius: 0（仅 iOS 有效，非标准）
真正跨版本稳定的方案，还是统一换成 <button></button> 并正确重置 appearance。
别漏掉 -webkit- 前缀，也别以为设了 border-radius: 0 就万事大吉——WebKit 的“默认圆角”是画在渲染层里的，不是 CSS 层能直接覆盖的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
