transform: translateY() 是卡片悬停升起的唯一靠谱方案，因不触发重排、仅合成，配合 transition 和多层 box-shadow 可实现顺滑立体浮起效果。
卡片悬停时只升不抖，transform: translateY() 是唯一靠谱方案
用 margin-top 或 top 搞悬浮升起，页面会重排，旁边元素会跳，视觉上就是“抖”。transform 只触发合成，不触发布局，动画顺滑且性能好。
- 必须搭配
transition，否则没动画：比如transition: transform 0.2s ease; -
transform: translateY(-8px)是常用值，负数往上移；正数反而往下掉 - 别忘了给卡片设
will-change: transform（可选），对频繁悬停的卡片能提前优化渲染路径 - 如果卡片有
border-radius，升起后阴影边缘可能发虚——这是浏览器光栅化导致的，加backface-visibility: hidden能缓解
box-shadow 加阴影要分层，单层阴影升起来像贴纸
只写一层 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，悬停时哪怕加大模糊值，也显得扁平、没立体感。真“浮起来”得模拟光源角度，靠多层阴影叠加。
- 推荐三层：近层（小偏移+低透明）、中层（稍大偏移+中透明）、远层（大模糊+高扩散）
- 例如：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.12), 0 12px 24px rgba(0,0,0,0.08); - 悬停时同步增强每层：偏移加大、模糊加宽、透明度微调（不是全拉满，否则像蒙灰）
- 注意：阴影层数越多，低端设备绘制压力越大，三到四层是实用上限
鼠标移入移出都卡顿？transition 的 timing function 和 duration 得配对
很多人只设 transition: all 0.3s，结果移出时“啪”一下砸回原位，或者悬停响应迟钝。根本原因是没区分进入/退出行为，也没匹配人眼感知节奏。
- 进阶写法：
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); - 进比出快一点更自然：可以拆成两个声明，用
:hover控制悬停态，不依赖反向过渡 - 别对
box-shadow用ease-in-out——它开头太慢，用户会觉得“反应滞后” - 移动端无 hover，记得补
@media (hover: hover)做条件启用，否则在 iPad 上可能误触发
IE11 或老安卓 WebView 下阴影消失？查 filter: drop-shadow() 兼容性陷阱
某些旧环境不支持多层 box-shadow，或对 rgba 透明度解析异常，导致阴影直接不显示。这时候不能硬扛，得降级。
立即学习“前端免费学习笔记（深入）”；
-
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15))在 IE11 中表现更稳定，但不支持多层 - 可用
@supports (box-shadow: 0 0 0 #000)做特性检测，优先用box-shadow，fallback 到filter - 注意：
filter会把整个元素当位图处理，如果卡片里有 subpixel 文字或 SVG，边缘可能糊 - 安卓 4.4 WebView 对
transform+box-shadow组合有渲染撕裂，加transform: translateZ(0)强制 GPU 加速可缓解
