必须显式设置 -webkit-appearance: none 才能使 border-radius: 0 和 box-shadow: none 生效，因 ios safari 对按钮类元素默认启用 -webkit-appearance: button，ua 样式权重极高，普通 css 无法覆盖。
必须显式设置 -webkit-appearance: none，否则 border-radius: 0 和 box-shadow: none 都无效。
为什么 border-radius: 0 单独写没用？
iOS Safari 对 input[type="submit"]、input[type="button"]、button 等元素默认启用原生渲染，背后是 -webkit-appearance: button 这个 UA 样式在硬接管；它的权重极高，普通 CSS 声明（哪怕带 !important）基本被忽略。
-
border-radius: 0只作用于你写的样式层，不触达系统控件渲染层 - 只设
outline: none也拦不住 focus 状态下的系统级高亮边框 - 某些 iOS 版本（如 iOS 16+）即使清除了
appearance，仍会强制最小圆角（约 2px），必须显式写border-radius: 0并真机测试
重置时该写哪些选择器？
不能只写 button 或泛泛的 input，要覆盖所有可能触发原生渲染的表单控件类型：
input[type="submit"]input[type="reset"]input[type="button"]button- 如果还用了
input[type="search"]，记得额外处理取消按钮：input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
为什么必须三前缀齐备？
仅写 -webkit-appearance: none 在较新 Safari（iOS 15.4+）或跨浏览器场景下不够稳——UA 样式表可能 fallback 到其他 appearance 值。
- 完整写法是：
-webkit-appearance: none; -moz-appearance: none; appearance: none; - 清除后必须手动补全基础样式：
border: none; outline: none; background: transparent; color: inherit; - 别忘了防点击高亮：
-webkit-tap-highlight-color: rgba(0,0,0,0); - 还有常被漏掉的：
box-shadow: none;—— 很多人以为appearance: none就清完了，结果阴影还在
哪些地方容易被忽略？
最常踩的坑不是写错属性，而是边界控制太粗或太细：
- 全局写
* { -webkit-appearance: none; }会破坏select、checkbox的平台一致性交互，尤其在 iOS 上 -
font-size小于 16px 时，iOS 可能强制放大文本并导致布局跳动，建议设为16px或加-webkit-text-size-adjust: 100% -
input[type="text"]和textarea虽然也要清圆角，但它们的默认appearance是textfield，不是button，所以规则可以单独控制，不必和按钮混写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
