iOS Safari中button默认带圆角是因为-webkit-appearance: button强制渲染系统样式，需同时设-webkit-appearance: none和border-radius: 0才能生效，并建议重置background、border等属性以完全自定义。
button在iOS Safari中为什么总是带圆角
iOS Safari（包括WKWebView）对 <button> 元素应用了内置的 -webkit-appearance: button 样式，它会强制渲染为带圆角、带阴影、带内边距的系统控件，且优先级极高，普通 border-radius: 0 往往无效。
必须同时覆盖 appearance 和 border-radius 才生效
仅设 border-radius: 0 不够，因为 -webkit-appearance 的样式权重更高。需显式重置外观并禁用系统样式：
- 设置
-webkit-appearance: none（Safari / iOS 必须） - 再设
border-radius: 0（或你需要的值） - 补充
background: transparent或自定义背景，否则可能残留系统灰底 - 建议加上
border: 1px solid currentColor或明确边框，避免“消失感”
完整最小化写法示例：
button {
-webkit-appearance: none;
appearance: none;
border-radius: 0;
background: #007aff;
color: white;
border: none;
}
注意 iOS 版本与 WebKit 行为差异
iOS 15.4+ 对 -webkit-appearance: none 的处理更严格，但某些旧版本（如 iOS 12）在表单上下文中仍可能回退到系统样式。若按钮嵌套在 <form> 内或有 type="submit"，可额外加：
立即学习“前端免费学习笔记（深入）”；
-
margin: 0—— 防止 Safari 自动加外边距 -
padding: 0—— 系统默认 padding 较大，需重置 -
line-height: normal—— 避免文字垂直偏移 - 慎用
font: inherit—— 某些 iOS 版本下会意外触发系统字体缩放
真机测试时容易忽略的交互态残留
即使视觉圆角已清除，iOS 点击时仍可能触发高亮蒙层（tap highlight），表现为半透明灰色遮罩。这不是圆角问题，但常被误认为“没清干净”：
- 加
-webkit-tap-highlight-color: transparent消除点击反馈色 - 若需保留点击反馈，改用
:active自定义背景变化，而非依赖系统行为 - 注意：该属性只在真实 iOS 设备或 Safari 模拟器中生效，桌面 Chrome 模拟无效果
圆角本身只是表层表现，真正要控制的是 WebKit 对表单控件的渲染主权 —— 把 appearance 拿回来，后面才可控。否则任何 border-radius 都像在给锁着的门刷漆。
