根本原因是 translatey 位移与 box-shadow 变化未同步匹配视觉权重；需同时调整 translatey(-4px) 和 box-shadow: 0 4px 12px rgba(0,0,0,0.16)，并统一 transition、避免 margin 模拟、合理控制阴影参数与性能优化。
hover时元素只动了但没“浮起来”的感觉
根本原因是 translateY 位移和 box-shadow 变化没同步、没匹配视觉权重。人眼判断“深度”靠两件事：位置偏移（上移）+ 底部阴影变大变虚。如果只改 translateY(-4px) 却让 box-shadow 还是 0 2px 4px rgba(0,0,0,0.1)，那就像把纸片往上拎——没厚度。
- 必须同时增大阴影的垂直偏移（
4px）、模糊半径（12px）、扩散半径（可选2px），并略微加深透明度（比如rgba(0,0,0,0.16)） -
transition要统一作用于两个属性：transition: transform 0.2s ease, box-shadow 0.2s ease;，不能只写all—— 否则可能触发重排或在旧版 safari 中失效 - 别用
margin-top: -4px模拟上浮，它会挤压其他元素；transform是纯视觉位移，不影响文档流
阴影参数调不好，看起来像“糊了”或“飘太远”
常见错误是把 box-shadow 的模糊值（第二个值）设得太大（比如 30px），导致边缘发散、失去聚焦感；或者垂直偏移设成负数（如 0 -4px 8px），阴影跑到元素上方，完全违背物理直觉。
- 推荐起手组合：
box-shadow: 0 4px 12px rgba(0,0,0,0.16);—— 垂直偏移4px对应translateY(-4px)，模糊12px提供柔和过渡，透明度0.16比默认0.1更有分量 - 如果容器有圆角（
border-radius），确保阴影能自然包裹：不要加inset，也别用spread值过大（超过4px易显僵硬） - 深色模式下，
rgba(0,0,0,0.16)可能过重，可改用rgba(0,0,0,0.12)或根据背景动态调整
transition在低性能设备上卡顿或闪一下
本质是浏览器把 transform 和 box-shadow 都当成了需要重绘（repaint）的属性，尤其 box-shadow 在老版本 chrome 或低端 android 上开销明显。
- 强制开启硬件加速：给元素加
will-change: transform;（仅 hover 前状态），但别滥用——只加在真正需要提升的元素上 - 避免同时过渡太多属性，例如有人加了
color、background-color一起动，这会触发额外重绘；深度感只需transform+box-shadow - 时间别设太长：
0.3s以上人眼已感知延迟；0.2s是兼顾流畅与响应的常见值，缓动用cubic-bezier(0.25, 0.46, 0.45, 0.94)比ease更自然（类似 Material Design）
按钮/卡片用了效果，但点击态（active）不连贯
悬浮（:hover）和按下（:active）之间断层，用户会感觉“按下去没反馈”，破坏深度一致性。
立即学习“前端免费学习笔记（深入）”；
-
:active状态要更进一步：比如transform: translateY(0)（回到原位）+box-shadow: 0 2px 6px rgba(0,0,0,0.12)（比 hover 更轻），模拟“压下去”的反向反馈 - 别忘了设置
transition也作用于:active，否则按下瞬间会突变；可以复用同一组 transition 声明，写在基础选择器里（如.card { transition: ...; }） - 移动端需补
:focus-visible或@media (hover: none)逻辑，否则触摸屏用户永远看不到 hover 效果
真正难的是阴影和位移的数值配比——差 1px 垂直偏移，或 0.02 的透明度，都会让“浮”变成“飘”或“陷”。多在真实设备上点几下，比对着代码调参数管用。