卡片悬浮感靠box-shadow而非margin，需用多层阴影模拟光源与距离，配合transition、gap布局及响应式调整。
卡片悬浮感靠的是 box-shadow 的深度模拟，不是 margin
很多人误以为加 margin 就能做出“悬浮”，其实 margin 只负责留白，真正营造立体感的是 box-shadow 的模糊半径、偏移和颜色渐变。css 里没有“Z 轴高度”属性，所谓悬浮，本质是用阴影暗示光源位置和物体离背景的距离。
实操建议：
-
box-shadow至少包含三个值：offset-x、offset-y、blur-radius，例如box-shadow: 0 4px 12px rgba(0,0,0,0.1) - 想强化悬浮感，可叠加两层阴影：一层短偏移+小模糊（模拟近处投影），一层大偏移+大模糊（模拟远处弥散）
- 避免用纯黑
rgba(0,0,0,0.3)—— 真实阴影带环境色，浅色背景推荐rgba(0,0,0,0.08)，深色背景改用rgba(255,255,255,0.06) - 别给父容器设
overflow: hidden，否则阴影会被裁掉
hover 动画必须搭配 transition，且只过渡关键属性
直接写 hover { box-shadow: ...; } 会触发突兀跳变。浏览器默认不自动补间，得显式声明过渡行为。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 阴影一出现就“炸开”，因为没限制过渡范围，连
width或height都被过渡了 - 移动端点按无反馈，因未补充
:active或触屏适配 - 动画卡顿，源于过渡了
box-shadow以外的重绘属性（如background-color）
正确写法示例：
card { box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: box-shadow 0.2s ease, transform 0.2s ease; } card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); transform: translateY(-2px); }卡片组间距用 gap 而非 margin，避免外边距合并陷阱
用 margin 控制卡片间距时，相邻卡片的上下 margin 会合并，导致实际间隔不可控；Grid 或 flex 布局下，gap 是专为此设计的安全方案。
使用场景：
- 卡片用
display: grid时，直接写gap: 16px - Flex 布局需注意：旧版 safari 对
gap支持差，可降级为margin+:not(:last-child)选择器 - 不要在卡片自身设
margin-bottom后又用gap，二者叠加会让间距翻倍 -
gap不影响元素尺寸计算，不会触发重排，比margin更轻量
响应式悬浮需控制阴影强度，否则小屏上显得脏乱
大屏可用较重的 box-shadow（如 0 12px 32px），但手机端屏幕小、观看距离近，同样参数会让卡片像“浮在灰雾里”。这不是错觉，是视觉对比度和像素密度共同作用的结果。
实操建议：
- 用媒体查询降低小屏阴影：
@media (max-width: 768px) { card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); } } - 避免在
hover中改变transform: scale()—— 放大会让文字边缘模糊，尤其在非 Retina 屏上 - 暗色模式下，阴影颜色必须同步切换，否则会透出奇怪的灰边（检查
prefers-color-scheme）
最易被忽略的一点：阴影的 blur-radius 和设备像素比强相关。真机调试时，务必在实际设备上验证 hover 效果，模拟器里的渲染和真实观感常有偏差。