button 默认3d效果源于appearance属性默认值为button并触发ua渲染逻辑；需同时设置-webkit-appearance:none、-moz-appearance:none和appearance:none才能彻底剥离，再显式重置padding、border、outline及:active/:focus状态。
button 默认 3D 效果来自 appearance 和 user agent 样式
浏览器给 <button></button> 加了一层“拟物化”皮肤，不是单纯靠 background 或 border 控制的，核心是 appearance 属性默认值为 button，触发了 UA（用户代理）内置的渲染逻辑。直接写 background: none 或 border: 0 常常无效，因为 UA 样式优先级高，且可能带内联阴影、渐变、甚至伪元素。
appearance: none 必须配合 -webkit-appearance 和 -moz-appearance
只写 appearance: none 在 Safari 和旧版 Firefox 下不生效。必须补全前缀才能真正剥离原生样式：
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
- 缺
-webkit-appearance→ Safari/iOS 上按钮仍有圆角、阴影、点击反馈 - 缺
-moz-appearance→ Firefox 可能保留灰色背景或边框 -
appearance: none单独写 → Chrome 新版本虽支持，但兼容性断层明显
重置 border 和 background 后还要处理 focus outline 和 padding
去掉原生样式后，border 和 background 确实归零了，但你会发现按钮“缩进”了、点击没反馈、键盘聚焦时 outline 消失或错位——这是因为 UA 还悄悄设置了 padding、line-height、outline 和 font 继承规则：
- 必须显式设
border: 1px solid transparent（而非none），否则某些浏览器下 focus outline 渲染异常 -
padding建议重置为0.375em 0.75em这类可读值，别用0，否则文字贴边难点击 -
outline若要自定义，得在:focus里重新写，不能依赖 UA 的默认环形高亮 - 部分 Android WebView 会忽略
appearance: none，需额外加border-radius: 0防圆角残留
Chrome 120+ 开始限制 appearance: none 对 button 的影响
新版 Chrome 强制保留部分交互样式（比如按下态的背景变暗），即使 appearance: none 生效，:active 仍可能有不可控灰度变化。这时得用 background-color: currentColor + color 控制，或彻底接管 :active：
button:active {
background-color: #007bff;
transform: translateY(1px);
}
别指望纯 CSS 彻底“清空”所有行为；按钮的语义和可访问性要求它必须有视觉反馈，强行抹掉反而影响键盘用户和屏幕阅读器识别。
真正干净的重置，从来不是删光所有样式，而是明确接管每一处渲染细节——尤其是 appearance、padding、border、outline 和 :active/:focus 状态，漏掉任意一个，都可能在某个浏览器里突然“复活”那个你拼命想甩掉的 3D 按钮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
