合理设置box-shadow可提升卡片立体感和交互性，.card{box-shadow:0 4px 8px rgba(0,0,0,0.1)}实现基础悬浮效果，通过多层阴影如0 2px 4px与0 8px 16px叠加增强层次，并在:hover时增大偏移与模糊模拟抬升，强化用户反馈。
在CSS初级项目中，使用 box-shadow 属性为卡片添加阴影，是提升界面层次感和视觉吸引力的简单有效方式。合理设置阴影能让元素“浮”在页面上，增强交互感和立体效果。
理解 box-shadow 的基本语法
box-shadow 属性可以为盒模型添加一个或多个阴影，其基本语法如下：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 阴影颜色 [inset];- 水平偏移（必填）：正值向右，负值向左
- 垂直偏移（必填）：正值向下，负值向上
- 模糊半径（可选）：值越大越模糊，0 表示边缘清晰
- 扩散半径（可选）：正值扩大阴影，负值缩小
- 阴影颜色（可选）：常用 rgba(0,0,0,0.1) 这类透明黑色更自然
- inset（可选）：将阴影设为内阴影
为卡片设置自然的外阴影
常见的卡片阴影应柔和、不突兀。以下是一个适合大多数场景的基础设置：
.card {box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
- 0：水平无偏移
- 4px：轻微向下，模拟自然光照
- 8px：适度模糊，使阴影柔和
- rgba(0,0,0,0.1)：浅黑透明色，避免太重
这种配置让卡片看起来轻盈且有悬浮感，适合信息卡片、产品展示等。
立即学习“前端免费学习笔记（深入）”；
增加多层阴影增强立体感
想要更强的层次，可以用逗号分隔设置多个阴影，模拟不同光源或深度：
.card {box-shadow: 0 2px 4px rgba(0,0,0,0.05),
0 8px 16px rgba(0,0,0,0.1);
}
- 第一层：贴近卡片，非常浅的阴影
- 第二层：稍远且模糊更大，表现整体投影
多层阴影模仿真实世界中物体投下的渐变影子，视觉上更丰富。
悬停时动态增强阴影
结合 :hover 状态，可以让卡片在用户交互时“抬升”，增强反馈：
.card:hover {box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
- 增大垂直偏移和模糊值，模拟“抬起”效果
- 颜色略加深，突出变化
这种微交互动画能显著提升用户体验，代码却极简。
基本上就这些。掌握 box-shadow 的参数组合，用好透明度和模糊，就能让普通卡片立刻变得有质感。不复杂但容易忽略细节。
