button:hover阴影“跳”而非“加深”的根本原因是初始box-shadow未统一声明，浏览器无法在none与有值间插值，必须用数值形式如0 1px 2px rgba(0,0,0,0.08)作默认态，hover时再增强为0 4px 8px rgba(0,0,0,0.3)，同时transition须写在默认状态并精准锁定box-shadow属性。
button:hover 为什么阴影会“跳”而不是“加深”
根本原因是没统一初始 box-shadow 值，导致浏览器从“无阴影”硬切到“有阴影”，触发重排+视觉突变。不是写法错，是漏了默认态声明。
必须显式写默认状态的阴影（哪怕极浅），例如：box-shadow: 0 1px 2px rgba(0,0,0,0.08)；:hover 里再加粗：box-shadow: 0 4px 8px rgba(0,0,0,0.3)。
- 别用
box-shadow: none作默认值——它和带值的阴影之间无法平滑过渡 - 悬停时优先调高
rgba()的 alpha 值（如 0.08 → 0.3），比单纯拉大模糊半径更有效 - 垂直偏移从
1px加到4px能强化“压近感”，但别超过6px，否则像按钮被顶飞 - 模糊半径建议保持在
6px–8px区间：太小（12px）反而虚化、失焦
transition 写在哪？怎么写才不拖慢响应
transition 必须写在默认状态（非 :hover），且只锁定要动的属性。写在 :hover 里，首次悬停无动画；写 all，会连 background-color 一起缓动，造成延迟感。
正确写法：transition: box-shadow 0.25s ease-out, transform 0.25s ease-out;
- 时间选
0.2s–0.3s最自然：短于0.15s像没动，长于0.4s显卡顿 - 缓动函数用
ease-out比ease更干脆，避免悬停结束时“回弹”感 - 如果同时用了
transform: translateY(-2px)，必须把transform也加入transition列表，否则位移会瞬移
移动端点按没反馈？这不是 bug，是规范行为
iOS Safari 和多数安卓浏览器不支持真机上的 :hover（首次点击才触发，且不自动恢复）。纯靠 :hover 的阴影在手机上基本不可见。
务实解法是叠加 :active + focus-visible：
-
button:active加一个临时阴影：box-shadow: 0 2px 4px rgba(0,0,0,0.15)，配合transform: translateY(1px) -
button:focus-visible补键盘操作场景，颜色可略深于默认态，但别超过悬停强度 - 真机测试时关掉 Chrome DevTools 的模拟器，直接在 Safari/Chrome 真机点按——很多“失效”其实是模拟器误导
深色背景上阴影发灰或看不见
在 #121212 或 #2d2d2d 这类深灰背景上，rgba(0,0,0,0.2) 的阴影几乎不可见，不是代码失效，是对比度崩了。
解决方案是换浅色阴影，而非加浓黑色：
- 用
rgba(255,255,255,0.08)或rgba(240,240,240,0.12)替代黑影 - 配合
@media (prefers-color-scheme: dark)自动切换：box-shadow: 0 2px 4px rgba(255,255,255,0.08) - 慎用纯白
rgba(255,255,255,0.2)——透明度超0.15容易发“晕”，边界糊
真正难的不是参数调多少，而是意识到：阴影不是独立效果，它永远在和背景、文字、交互节奏共谋。漏掉任意一环，用户感受到的就不是“加深”，而是“断层”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
