单层 box-shadow 悬停易跳变，需双层分控深度与聚焦；仅过渡 box-shadow 和 transform，禁用 all；移动端必须补充 :active 状态并统一阴影值。
直接用 box-shadow 配合 transition 就能实现干净、高性能的动态阴影悬停效果，不需要 JS 或滤镜。
为什么不能只写一个 box-shadow 值就完事？
单层阴影在悬停时容易显得“跳变”——因为阴影扩散半径和偏移量同时变化，人眼会感知为位置突移。真正自然的效果需要分层控制：底层负责深度感（大而淡），上层负责聚焦感（小而实）。
- 推荐写法是两层
box-shadow：例如0 4px 12px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08) - 悬停时只放大第二层的扩散值（如改成
0 12px 32px），第一层保持不变或微调，视觉更稳 - 避免对
box-shadow使用ease-in-out以外的缓动——cubic-bezier(.25,.46,.45,.94)这类自定义曲线在阴影上反而显生硬
transition 只该过渡哪些属性？
只过渡 box-shadow 和必要辅助属性（比如 transform: translateY(-2px)），其他一律不加。过渡 all 或 background-color 会触发重排，尤其在低端设备上明显掉帧。
- 正确写法：
transition: box-shadow 0.25s ease, transform 0.25s ease; - 错误写法：
transition: all 0.3s;—— 即使卡片没背景色变化，浏览器仍会监听所有可动画属性 - 如果用了
filter: drop-shadow()，别跟box-shadow混用，二者渲染路径不同，叠加会导致边缘发虚
移动端触摸反馈怎么不“粘滞”？
纯 :hover 在 iOS Safari 和部分安卓浏览器上不触发，且没有“按下→释放”的状态区分，导致反馈延迟或失效。
- 必须补充
:active状态，例如：&:active { transform: translateY(0); box-shadow: ...; } - 为避免点击后阴影残留，建议把悬停和激活的阴影值设为一致，或让
:active的阴影略小于:hover（模拟按压回弹感） - 不要依赖
touchstart手动加 class——CSS 原生伪类更轻量，且能被浏览器优化
阴影层级、过渡粒度、移动端状态覆盖，这三点漏掉任意一个，用户都会觉得“卡”“假”或者“点不动”。尤其是 transition 属性列表写宽了，比写少了更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
