卡片悬浮立体感关键在于光影逻辑与双层阴影配合：近距浮起层（0 2px 4px rgba(0,0,0,0.15)）模拟接触压感，远距柔光层（0 8px 16px rgba(0,0,0,0.1)）营造抬升距离。
让卡片在页面中呈现悬浮立体感，关键不是堆叠越多阴影越好，而是用光影逻辑模拟真实空间关系——就像一盏灯从上方打下来，卡片离背景越近，阴影越小越实；抬得越高，阴影越淡越散。
用双层阴影构建基础立体层次
单层 box-shadow 容易显得贴图、生硬。推荐组合两层阴影，分别模拟“紧贴感”和“抬升感”：
-
第一层（近距浮起）：偏移小、模糊低、透明度稍高，比如
0 2px 4px rgba(0,0,0,0.15)，模拟卡片底部与背景的轻微接触压感； -
第二层（远距柔光）：偏移大、模糊高、透明度更低，比如
0 8px 16px rgba(0,0,0,0.1)，营造视觉上的“抬升距离”； - 完整写法：
box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.1);
悬停时增强动态反馈
鼠标悬停是用户确认可交互的关键信号，此时应强化立体变化，但避免突兀：
- 垂直偏移加大（如从 8px → 12px），让卡片看起来“浮得更高”；
- 模糊值略增（16px → 20px）、不透明度微升（0.1 → 0.12），加深景深；
- 必须搭配
transition: box-shadow 0.2s ease，让变化平滑自然； - 示例：
.card:hover { box-shadow: 0 4px 6px rgba(0,0,0,0.18), 0 12px 20px rgba(0,0,0,0.12); }
配合位移与圆角提升真实感
阴影只是光影部分，真正“悬浮”需要空间位移和形态呼应：
- 悬停时加
transform: translateY(-4px)，让卡片物理上抬升，和阴影变化同步； - 卡片本身设
border-radius: 8px或更高，圆角能柔化边缘，让阴影过渡更自然； - 避免纯黑阴影，用深灰（如
#00000012）或带底色倾向的 rgba 值，防止灰块感； - 深色背景上，把透明度调低至 0.05–0.08，否则阴影会“发亮”失真。
注意层级与容器边界
再好的阴影，被裁掉就前功尽弃：
- 父容器若设了
overflow: hidden，阴影会被截断——改用overflow: visible或预留足够padding； - 多卡片堆叠时，用
z-index明确顺序，配合不同强度的阴影体现前后深度； - 移动端慎用过大的模糊值（如 >24px），既影响性能，也削弱清晰度。
