box-shadow属性是实现卡片立体效果的关键，通过设置水平偏移、垂直偏移、模糊半径、扩散半径和颜色参数，可创建多层次阴影；例如使用0 4px 8px rgba(0,0,0,0.1)和0 6px 20px rgba(0,0,0,0.08)双层阴影叠加，使卡片呈现悬浮感，配合border-radius圆角与hover时加深阴影的动效，能增强界面深度与交互真实感。
想要在网页中制作出具有立体感的卡片效果，CSS 的 box-shadow 属性是关键。它能让元素脱离平面，产生光影层次，使界面更生动、现代。
理解 box-shadow 语法
box-shadow 允许你为元素添加一个或多个阴影，控制方向、模糊度、扩散范围和颜色。基本语法如下：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色;其中：
- 水平偏移：正值向右，负值向左
- 垂直偏移：正值向下，负值向上
- 模糊半径：值越大，阴影越柔和
- 扩散半径：正值扩大阴影，负值缩小
- 颜色：建议使用 rgba，可设置透明度，更真实
常见卡片阴影示例
下面是一个典型的带阴影卡片样式：
立即学习“前端免费学习笔记（深入）”；
.card {
width: 300px;
padding: 20px;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
0 6px 20px rgba(0, 0, 0, 0.08);
}
这里用了两个阴影叠加：
- 第一层：贴近卡片底部，短距离模糊，模拟近处投影
- 第二层：稍远且更广，营造环境光感
这种组合让卡片像是“浮”在页面上，视觉上更有深度。
调整阴影增强真实感
想让阴影更自然，可以尝试：
- 使用 rgba 色值，避免纯黑阴影带来的生硬感
- 轻微调整偏移量，例如
2px 4px比0 0更有空间感 - 配合 border-radius 使用，圆角卡片配上柔化阴影更协调
- 鼠标悬停时加深阴影，实现“抬起”动效：
.card:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
基本上就这些。掌握 box-shadow 的参数搭配，就能轻松做出专业级的卡片效果，提升整体 UI 质感。不复杂但容易忽略细节。
