纯 box-shadow 悬浮无立体感，因缺少位置微调和阴影变化；需配合 transform: translateY(-2px) 上浮、增大加深 box-shadow 并加平滑过渡，且 transition 必须同步控制二者。
直接加 box-shadow 不够，必须配合 transform: translateY(-2px) 和过渡控制，否则会卡顿、跳变或在 Safari 下失效。
为什么纯 box-shadow 悬浮没立体感？
Bootstrap 5 的 .card 默认没有 transition，鼠标移入时阴影突变，缺乏“上浮”错觉；且阴影深度不变，视觉上只是变暗，不是抬升。真正立体感来自两个信号：位置微调（向上）+ 阴影扩大加深 + 平滑过渡。
正确写法：用 :hover 同时改 transform 和 box-shadow
必须在同一选择器里同步控制位移和阴影，否则动画不同步。推荐写法：
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}
-
transform: translateY(-2px)是关键——让卡片真“上浮”，不是伪移位 -
box-shadow值中8px（垂直偏移）要略大于水平偏移（如4px），模拟光源在上方的自然投影 - 避免用
transition: all，它会拖慢渲染，尤其在移动端 - 如果卡片内含图片或按钮，确保它们不因
transform触发重排（一般不会，但老版 Safari 可能需加will-change: transform）
兼容性坑：Safari 下 transform 失效或闪烁
Safari 对 transform 的硬件加速判断更敏感，常见表现是 hover 瞬间闪一下或不动。解决方法：
立即学习“前端免费学习笔记（深入）”；
- 给
.card强制开启合成层：backface-visibility: hidden或will-change: transform - 别在
:hover里改height或margin，这些会触发重排，打断transform动画 - 如果用了
filter: drop-shadow()替代box-shadow，务必删掉——它不支持transition，且性能差
进阶：适配深色模式与响应式悬停强度
深色背景下，rgba(0,0,0,0.12) 阴影不够明显；小屏设备手指悬停不可靠，应降级为点击态或取消动画。可这样处理：
@media (prefers-color-scheme: dark) {
.card:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
}
@media (max-width: 576px) {
.card {
transition: none;
}
.card:hover {
transform: none;
box-shadow: none;
}
}
真正难的是平衡：上浮太多像弹跳，阴影太重像浮窗，过渡太慢显迟滞——建议先用 -2px + 0.2s 跑通，再微调数值。别忽略父容器是否有 overflow: hidden，它会裁掉上浮后的阴影。
