卡片阴影通过box-shadow属性实现，基本语法为“水平偏移 垂直偏移 模糊半径 扩散半径 颜色”，常用rgba控制透明度；示例中设置0 4px 8px rgba(0,0,0,0.1)实现轻量立体感，结合border-radius增强视觉效果；常见效果包括浅色悬浮、中等立体和明显浮起，内阴影用inset营造凹陷；优化时应避免过大阴影以提升性能，并在多设备测试确保一致性。
卡片阴影是网页设计中常用的效果，能让内容块看起来更有层次感和立体感。对CSS初学者来说，使用 box-shadow 属性是最直接实现卡片阴影的方式。
理解 box-shadow 属性
box-shadow 可以为元素添加一个或多个阴影效果。基本语法如下：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色;其中：
- 水平偏移：正值向右，负值向左
- 垂直偏移：正值向下，负值向上
- 模糊半径：值越大，阴影越模糊
- 扩散半径：可选，正值扩大阴影，负值缩小
- 颜色：支持 rgba 更好控制透明度
基础卡片阴影示例
创建一个简单的卡片结构：
立即学习“前端免费学习笔记（深入）”；
卡片内容
添加CSS样式：
width: 300px;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
这个阴影轻微向下偏移，有适度模糊，适合大多数轻量级UI。
常见实用阴影效果
根据设计需求，可以调整参数实现不同风格：
- 浅色悬浮感：
0 2px 4px rgba(0,0,0,0.1)
- 中等立体感：
0 4px 12px rgba(0,0,0,0.15)
- 明显浮起效果：
0 8px 16px rgba(0,0,0,0.2)
- 内阴影（凹陷感）：
inset 0 2px 4px rgba(0,0,0,0.1)
优化与注意事项
为了让阴影更自然、性能更好，注意以下几点：
- 优先使用
rgba
设置颜色，控制透明度避免过重 - 配合
border-radius
使用，圆角卡片更需要柔和阴影 - 避免过度使用大阴影，影响页面加载和滚动流畅性
- 在移动端测试显示效果，某些老设备渲染可能不一致
基本上就这些。掌握 box-shadow 的参数组合，多尝试几种数值搭配，很快就能做出美观自然的卡片阴影。不复杂但容易忽略细节。
