实现卡片阴影渐变过渡需结合box-shadow与transition属性。1. 构建基础卡片结构：使用div元素创建.card类容器；2. 设置默认样式与过渡效果：定义card的尺寸、背景、圆角及初始阴影box-shadow: 0 4px 10px rgba(0,0,0,0.1)，并通过transition: box-shadow 0.3s ease设定平滑动画；3. 添加悬停增强效果：在.card:hover中修改box-shadow为0 12px 24px rgba(0,0,0,0.18)，增加偏移与模糊半径以模拟浮起感；4. 可选多层阴影优化：通过逗号分隔的多组阴影值（如0 2px 6px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)）构建层次感，hover时逐层增强提升立体视觉。合理调控rgba透明度与缓动函数可使过渡更自然。
实现卡片阴影的渐变过渡效果，关键在于利用 box-shadow 和 transition 属性结合伪类（如 :hover）来创建平滑的视觉变化。下面详细介绍具体方法。
1. 基础卡片结构
先构建一个简单的卡片元素，便于后续添加样式：
<div class="card">卡片内容
</div>
2. 设置默认阴影与过渡
给卡片设置初始的 box-shadow，并定义 transition 属性，让阴影变化更柔和：
.card {width: 300px;
height: 200px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
padding: 20px;
margin: 50px auto;
text-align: center;
}
- box-shadow 使用 rgba 颜色以便控制透明度
- transition 指定只对 box-shadow 进行动画，持续 0.3 秒，使用 ease 缓动函数
3. 添加悬停时的阴影增强效果
当鼠标悬停时，提升阴影的扩散范围和深度，营造“浮起”感：
立即学习“前端免费学习笔记（深入）”；
.card:hover {box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
- 增大偏移距离和模糊半径，使阴影更明显
- 轻微增加颜色不透明度，增强立体感
4. 可选：多层阴影营造渐变层次
使用多组阴影值叠加，可模拟更自然的光效：
.card {box-shadow:
0 2px 6px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(0, 0, 0, 0.06);
} .card:hover {
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.12),
0 12px 24px rgba(0, 0, 0, 0.1);
}
- 多层阴影分别模拟近处投影和远处光晕
- hover 时逐层增强，过渡更细腻
