必须设 -webkit-appearance: none; -moz-appearance: none; appearance: none 三者齐备，否则 iOS Safari 默认渲染会劫持 border-radius、background 等样式；清除后还需手动补 border: none; outline: none; background; color; -webkit-tap-highlight-color: rgba(0,0,0,0)。
iOS Safari 里按钮背景色、圆角、高光全不听你指挥，不是 CSS 写错了，是 -webkit-appearance: button 在后台硬接管渲染——必须显式设为 none，且不能只靠它单打独斗。
为什么 border-radius: 0 和 background 都失效
iOS Safari 对 button、input[type="button"]、input[type="submit"]、input[type="reset"] 默认启用原生 UI 渲染，-webkit-appearance: button 的 UA 样式权重极高，普通声明（哪怕带 !important）基本被无视。
- 仅设
border-radius: 0或border: none毫无作用 -
outline: none必须配合出现，否则 focus 状态下仍有系统级边框 - 某些 iOS 版本（如 iOS 16+）即使清除了
appearance，仍会强制最小圆角（约 2px），需显式写border-radius: 0并测试真机
-webkit-appearance: none 必须搭配 appearance 和 -moz-appearance
只写 -webkit-appearance: none 在较新 Safari（iOS 15.4+）或跨浏览器场景下不够稳，UA 样式表可能 fallback 到其他 appearance 值。
- 三者缺一不可：
-webkit-appearance: none、-moz-appearance: none、appearance: none -
appearance: none是标准属性，但 Safari 直到 iOS 15.4 才支持；-moz-appearance主要防 Firefox Android 旧版干扰 - 选择器要覆盖全：
button, input[type="button"], input[type="submit"], input[type="reset"]
清除后还得补哪些样式才真正干净
移除 appearance 只是第一步，iOS 还有两处隐形覆盖常导致背景色发灰、文字看不清、点击反馈异常：
- 必须加
border: none和outline: none，否则残留 focus 边框或默认边线 -
background和color需显式定义，不能依赖继承；iOS 有时会把background: #fff渲染成浅灰底 - 点击高亮默认是半透明黑 overlay，需加
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)关闭 - 如果用了 Vue/React 封装的
<button></button>，确认该 CSS 规则能穿透 scoped 样式或 Shadow DOM
真机测试时容易忽略的缓存和 viewport 问题
改完 CSS 在模拟器上看生效了，真机上还是老样子？大概率是缓存或 viewport 设置没对齐。
- Safari 移动端缓存激进，改完必须硬刷新（长按刷新按钮 → “重新加载”），或禁用缓存调试
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">缺失会导致 Safari 启用“桌面兼容模式”，appearance行为异常 - 部分 iOS 版本（如 iOS 17.5）对
appearance: none的解析有延迟，建议在body加载后用 JS 强制重绘：element.style.transform = 'translateZ(0)'
最麻烦的不是写不对，是以为写对了——iOS 的样式劫持藏得深，appearance 不清干净，后面所有颜色、圆角、阴影都白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
