如何通过css实现卡片阴影渐变过渡-css教程-PHP中文网

如何通过css实现卡片阴影渐变过渡

P粉602998670

发布： 2025-10-24 22:20:02

原创

899人浏览过

实现卡片阴影渐变过渡需结合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透明度与缓动函数可使过渡更自然。

如何通过css实现卡片阴影渐变过渡

实现卡片阴影的渐变过渡效果，关键在于利用 box-shadow 和 transition 属性结合伪类（如 :hover）来创建平滑的视觉变化。下面详细介绍具体方法。

1. 基础卡片结构

先构建一个简单的卡片元素，便于后续添加样式：

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. 添加悬停时的阴影增强效果

当鼠标悬停时，提升阴影的扩散范围和深度，营造“浮起”感：

AI TransPDF

高效准确地将PDF文档翻译成多种语言的AI智能PDF文档翻译工具

231

查看详情

立即学习“前端免费学习笔记（深入）”；

.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);
}