仅写 box-shadow 无法实现“浮起”效果，因其只绘制静态阴影而不改变元素位置或层级；需配合 hover 时动态增大偏移、模糊半径并上移元素（transform: translatey(-2px)），辅以合理过渡和双层阴影才能触发立体错觉。
box-shadow 本身不支持真正的“悬浮”动画，但配合 transition 和 :hover 才能做出视觉上立体抬升的效果；直接写 box-shadow 静态值只会让卡片看起来有阴影，不会动。
为什么只加 box-shadow 没有“浮起来”的感觉？
纯 box-shadow 只是绘制一层或多层阴影，它不改变元素位置或层级。人眼判断“浮起”的关键信号是：阴影变大 + 变柔 + 偏移向下 + 背景层相对静止。必须让阴影在鼠标悬停时动态变化，同时轻微上移元素本身（用 transform: translateY(-2px)），才能触发立体错觉。
常见错误现象：box-shadow 写了但 hover 时没变化、阴影始终贴着卡片底部、阴影颜色太深像脏边、过渡时间过长显得卡顿。
- 阴影偏移量（第3个参数）建议设为
4px到8px，太小看不出层次，太大像掉下去 - 模糊半径（第4个参数）至少是偏移量的 1.5 倍，比如
4px 4px 12px，否则边缘生硬 - 务必搭配
transition: all 0.2s ease，且写在非 hover 规则里，否则首次悬停会闪一下 - 别用
rgba(0,0,0,0.5)这类高透明度深黑——推荐rgba(0,0,0,0.12)或rgba(0,0,0,0.16)，更接近真实光线下浅投影
一个可用的卡片悬浮组合写法
以下代码片段可直接复制进项目，已平衡真实感与性能（避免重绘）：
.card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
transform: translateY(-2px);
}
说明：用了两层 box-shadow 模拟环境光+主投影，第二层更近更淡，增强纵深；transform 上移比阴影偏移量小（-2px vs 8px），符合物理直觉；所有过渡属性显式列出，避免 all 触发不必要的 layout 计算。
移动端和 Safari 的兼容性注意点
iOS Safari 对 box-shadow 的多层渲染有轻微延迟，且 transform 在某些老版本中可能触发闪烁。实际部署时需验证：
- 加
will-change: transform到.card可提前提示浏览器优化渲染路径（但别滥用，仅对高频交互元素） - 如果卡片内含图片或字体图标，确保父容器没设
overflow: hidden，否则transform抬升后边缘可能被裁切 - 不要用
box-shadow模拟内阴影（如inset）来“压”卡片边缘——这会削弱浮起感，属于反模式 - 深色模式下，
rgba(0,0,0,0.12)可能不够明显，可配合@media (prefers-color-scheme: dark)微调为rgba(255,255,255,0.08)
真正难的不是写出阴影，而是控制变化的节奏和幅度——人的视觉系统对微小位移和渐变极其敏感，差 1px 或 0.05s 都可能让效果从“自然浮起”变成“突然跳动”。动手调的时候，盯着看 10 秒，再改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
