必须显式设置 appearance: none（含 -webkit-appearance: none 和 -moz-appearance: none）才能真正清空默认样式；之后需手动补全 border、padding、background，并用 inline-flex 实现文字垂直居中，同时组合 :active 和 :focus-visible 控制点击阴影，避免 safari 闪烁需加 transform: translatez(0)。
button 默认 appearance 导致阴影不一致
Chrome、Safari、Firefox 对 <button></button> 的默认外观渲染逻辑不同，尤其在启用 box-shadow 时，Safari 和旧版 Edge 会把系统级按钮边框/高光和你写的阴影叠加，造成点击态阴影忽深忽浅、甚至完全被遮盖。
根本原因不是 shadow 写错了，而是浏览器偷偷加了一层 appearance: button（或 -webkit-appearance），它自带内边距、边框、背景渐变和焦点高亮，干扰了你对样式的完全控制。
- 必须显式设置
appearance: none（含-webkit-appearance: none和-moz-appearance: none）才能真正“清空”默认样式 - 加了
appearance: none后，border、padding、background全部退回到 CSS 初始值，务必手动补全，否则按钮可能塌陷或不可见 - IE 不支持
appearance，但 IE 本身对box-shadow的点击态处理较简单，反而不容易出问题；重点盯 Safari 和 Chrome 110+（启用了新表单控件渲染）
click 阴影该用 :active 还是 :focus-visible？
用户点击按钮瞬间的阴影，不能只靠 :active —— 它在移动端触发后会残留（iOS Safari 的 :active 持续到 touchend 后），且键盘用户按 Space/Enter 时不会触发 :active，导致可访问性断裂。
真正可靠的方案是组合使用：
-
:active处理鼠标/触屏按下瞬间（视觉反馈要快，延迟 ≤ 0ms） -
:focus-visible覆盖键盘操作，且只在用户明显需要焦点指示时生效（避免鼠标用户看到多余轮廓） - 两者都加
box-shadow，但参数保持一致，例如：box-shadow: 0 2px 6px rgba(0,0,0,0.15) - 别忘了加
transition: box-shadow 0.1s ease，否则阴影突兀跳变
appearance: none 后按钮文字垂直居中失效
清除默认外观后，line-height 和 vertical-align 对齐逻辑回归标准块级行为，但按钮内部文字常因字体度量（ascent/descent）差异，在 Firefox 或某些字体下偏上或偏下。
最稳的解法不是调 line-height，而是用 Flex：
- 给按钮加
display: inline-flex（保留行内流特性） - 加
align-items: center和justify-content: center - 移除所有影响基线的
vertical-align值（尤其是vertical-align: middle在 flex 下无效还易冲突） - 如果按钮含图标+文字，flex 能自然撑开高度，避免手动算
padding补高度
Safari 中点击阴影闪烁或消失
这是 Safari 特有的重绘 bug：当按钮有 appearance: none + box-shadow + transition，且父容器存在 transform 或 will-change 时，:active 状态结束瞬间阴影会闪一下或直接丢帧。
绕过方式很具体：
- 给按钮自身加
transform: translateZ(0)（触发硬件加速，强制独立图层） - 或者改用
backface-visibility: hidden，效果等价但更语义化 - 切忌对整个页面或 body 加
transform，那会放大问题 - 这个 bug 在 iOS 16.4+ 和 macOS Ventura 13.3+ 里仍存在，不能指望用户升级系统来解决
跨浏览器按钮阴影不是调参游戏，是层层剥离默认样式、再逐个打补丁的过程。appearance: none 是起点，不是终点；每个浏览器都在悄悄加戏，你得比它更早动手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
