用 box-shadow 实现卡片立体感需模拟真实光源，推荐双层阴影：近距浮起（0 2px 4px rgba(0,0,0,0.15)）+ 远距柔光（0 8px 16px rgba(0,0,0,0.1)）；悬停时增强偏移、模糊与不透明度并配合 transition；微调水平偏移可提升自然感，避免多层、inset 及溢出裁剪。
用 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平滑过渡，避免突兀跳变。
示例：
.card:hover { box-shadow: 0 4px 6px rgba(0,0,0,0.18), 0 12px 20px rgba(0,0,0,0.12); transition: box-shadow 0.2s ease; }控制阴影方向与真实感细节
纯垂直偏移（0 Xpx）最常用，但微调水平偏移可模拟侧光源：
- 加一点向右下偏移（如
2px 4px），比完全居中更自然； - 避免使用过大的水平偏移（如 ±10px），否则像卡片被“推歪”，失去稳定感；
- 深色背景上，可适当降低阴影不透明度（
0.05–0.08），防止灰块感过重。
避免常见误区
- 别滥用多层：三层以上阴影难维护，且浏览器渲染开销上升，两层足够表现立体；
-
慎用内阴影（inset）：除非刻意做“凹陷”效果，否则
inset会削弱浮起感； -
注意父容器溢出：卡片若设了
overflow: hidden，阴影会被裁掉——需确保父元素有足够padding或设overflow: visible。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
