在网页设计中，让图片在交互时产生柔和的阴影渐变可以显著提升视觉体验。通过CSS的transition属性控制box-shadow的变化，我们能够在鼠标悬停等状态下使阴影平滑出现或消失，而不需要编写任何JavaScript代码。
一、核心原理说明
CSS的transition用于定义元素在某个属性发生变化时的过渡动画。当我们将transition作用于box-shadow，并设置合适的时长和缓动函数后，一旦box-shadow的值因:hover等状态改变，浏览器就会自动生成中间的渐变帧。
1.1 box-shadow基础写法
box-shadow常见的写法为：水平偏移 垂直偏移 模糊半径 扩散半径 颜色。例如：
/* 向右下偏移10px，模糊20px，黑色半透明 */ box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
1.2 transition基础写法
transition可简写为：属性名 时长 缓动函数 延迟。若只针对阴影：
/* box-shadow在0.3秒内匀速变化 */ transition: box-shadow 0.3s ease;
二、完整实现示例
下面使用一个图片卡片的结构，展示如何从无阴影渐变到有明显阴影。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.img-card {
width: 240px;
border-radius: 8px;
/* 初始无阴影 */
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
/* 阴影过渡：0.4秒，缓出 */
transition: box-shadow 0.4s ease-out;
}
.img-card:hover {
/* 悬停时显示阴影 */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
<img class="img-card" src="https://picsum.photos/240/160?random=2" alt="示例图片">
</body>
</html>
三、常用参数与注意事项
- 时长建议设置在0.2s到0.5s之间，过长会显得拖沓。
- 使用rgba颜色可以控制阴影透明度，使渐变更自然。
- 若同时过渡transform，可实现阴影与浮起的组合动效。
- 避免对box-shadow使用steps()缓动，否则会失去平滑渐变感。
3.1 多属性过渡对照表
| 需求场景 | transition写法 |
|---|---|
| 仅阴影渐变 | transition: box-shadow 0.3s ease; |
| 阴影加位移 | transition: box-shadow 0.3s, transform 0.3s; |
四、小结
利用CSS的transition控制box-shadow，是制作图片阴影渐变最简洁高效的方式。只要理清初始状态、目标状态与过渡时间，就能在各种项目中快速复用该技巧。
CSS_transitionbox-shadow图片阴影修改时间：2026-07-26 09:57:20