通过box-shadow与transition结合可实现鼠标悬停时卡片阴影的平滑渐变效果，如阴影放大或颜色加深，提升交互体验；默认状态下设置轻微阴影，hover时改为更大更明显的阴影，并通过transition定义过渡动画，使变化更自然；支持多层阴影叠加和cubic-bezier自定义缓动曲线增强层次感与弹性；需注意参数一致、明确指定属性避免all、使用rgba保证透明度过渡，兼容性方面现代浏览器良好但旧IE受限，移动端可用但不宜过度以保性能。
在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 缓动函数更自然。
进阶技巧：多层阴影与颜色渐变
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 的参数数量必须一致，否则过渡可能失效。
注意事项与兼容性
确保 transition 正确作用于 box-shadow：
- 不要写成
transition: all 0.3s，应明确指定box-shadow，避免影响其他属性。 - RGBA 颜色支持透明度变化，比直接用黑色更柔和。
- 旧版IE不支持 transition 或部分 box-shadow 特性，需根据项目需求考虑兼容。
- 移动端也支持良好，但避免过度使用影响性能。
基本上就这些。合理利用 box-shadow 与 transition，能让卡片交互更细腻，不复杂但容易忽略细节。
