如何在CSS中使用过渡实现卡片阴影渐变_box-shadow与transition配合

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中使用过渡实现卡片阴影渐变_box-shadow与transition配合

2025-11-28

浏览次数：次

返回列表

通过box-shadow与transition结合可实现鼠标悬停时卡片阴影的平滑渐变效果，如阴影放大或颜色加深，提升交互体验；默认状态下设置轻微阴影，hover时改为更大更明显的阴影，并通过transition定义过渡动画，使变化更自然；支持多层阴影叠加和cubic-bezier自定义缓动曲线增强层次感与弹性；需注意参数一致、明确指定属性避免all、使用rgba保证透明度过渡，兼容性方面现代浏览器良好但旧IE受限，移动端可用但不宜过度以保性能。

如何在css中使用过渡实现卡片阴影渐变_box-shadow与transition配合

在CSS中，通过将 box-shadow 与 transition 配合使用，可以实现卡片阴影的平滑渐变效果，比如鼠标悬停时阴影放大或颜色加深。这种效果常用于提升用户交互体验，让界面更生动。

基本语法与原理

box-shadow 用于定义元素的阴影效果，而 transition 控制属性变化的动画过程。当两者结合时，浏览器会自动在状态切换（如 hover）时对阴影进行插值动画。

box-shadow 的基本格式：

box-shadow: 水平偏移垂直偏移模糊半径扩散半径颜色;

transition 的常用写法：

transition: 属性名变化时长过渡函数延迟时间;

实现鼠标悬停阴影放大

给卡片设置默认阴影，然后在 hover 状态下扩大阴影范围，配合 transition 实现渐变。

.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

这样，鼠标移上卡片时，阴影会从轻微变为明显，过渡时间为 0.3 秒，使用 ease 缓动函数更自然。

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

进阶技巧：多层阴影与颜色渐变

box-shadow 支持多个阴影叠加，可以在过渡中体现更丰富的层次感。

.card {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card:hover {
  box-shadow:
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.15);
}

使用 cubic-bezier 自定义缓动曲线可以让动画更有弹性。注意：所有 box-shadow 的参数数量必须一致，否则过渡可能失效。