webkit-appearance: none 不能完全清掉按钮边框和背景，因为它仅禁用系统控件渲染逻辑，并不自动清除 UA 默认的 border、background、padding 和 font；必须手动设置 border: none、background: transparent、padding: 0、font: inherit 及 display: inline-block 等属性才能彻底重置。
webkit-appearance: none 为什么不能完全清掉按钮边框和背景？
直接写 webkit-appearance: none 看似能“重置”按钮，但实际在多数浏览器（包括 Safari 和 Chrome）里，它只禁用系统控件的渲染逻辑，**并不自动清除默认的 border、background、padding 或 font 样式**。你看到的灰色背景、细边框、内边距，全是浏览器 UA 样式表后续叠加的结果。
所以真正要“清除”，得手动覆盖这些属性：
-
border: none或border: 0（注意：某些 UA 用border: 1px solid transparent，仅写border: 0可能不生效） -
background: transparent（none在部分旧 Safari 下有兼容问题，优先用transparent） -
padding: 0（按钮默认 padding 差异大，iOS Safari 尤其喜欢加内边距） -
font: inherit（避免继承 UA 的 button 专用字体，比如加粗或字号突变）
button 元素必须显式设置 display 吗？
是的，尤其当你用了 webkit-appearance: none 后，某些 Safari 版本（如 iOS 15.4–15.6）会把 button 的 display 降级为 inline，导致宽高、垂直对齐异常。这不是 bug，是 WebKit 移动端对“无外观按钮”的默认回退行为。
稳妥做法是显式声明：
立即学习“前端免费学习笔记（深入）”；
button {
-webkit-appearance: none;
appearance: none; /* 别漏掉标准属性 */
border: none;
background: transparent;
padding: 0;
font: inherit;
display: inline-block; /* 或 block / flex，按需选 */
}appearance: none 在 Firefox 和旧 Edge 中失效怎么办？
appearance 是标准属性，Firefox 从 85+ 支持，但旧版 Edge（EdgeHTML）根本不支持；而 webkit-appearance 是 WebKit 专属，Chrome/Safari 有效，Firefox 忽略。
所以必须组合使用：
- 始终写
-webkit-appearance: none - 紧跟
appearance: none（现代浏览器兜底） - 对不支持
appearance的老浏览器（如 IE、旧 Edge），靠手动重置border/background等来模拟“清除”效果
不要依赖 @supports (appearance: none) 做条件加载——它在 Safari 里也返回 false（因为 Safari 只认 -webkit-appearance），判断意义不大。
reset 按钮样式后，可访问性还保得住吗？
清掉所有样式容易让按钮失去视觉反馈（比如 focus outline）、尺寸过小、对比度不足，这会直接破坏键盘导航和屏幕阅读器体验。
关键点：
- 别删
:focus样式，至少保留outline: 2px solid #007aff这类高对比色边框 - 确保点击区域 ≥ 44×44px（iOS 最小触控要求），可用
min-width/min-height或padding补足 - 如果隐藏了文字（比如只用 icon），务必加
aria-label，否则 screen reader 读不出功能
最常被忽略的是：清除样式后，button 的 cursor: pointer 也没了，得手动补上，否则用户看不出这是可点元素。
