图片阴影渐变通过box-shadow与transition结合实现，1. box-shadow设阴影参数，transition控制变化过程；2. 初始状态用透明色rgba(0,0,0,0)避免突变，hover时改为不透明值；3. 关键是保持box-shadow结构一致，禁用none；4. 可扩展多参数动画，如扩大范围、加深颜色，配合cubic-bezier定制缓动。
图片阴影的渐变效果可以通过 CSS 的 transition 与 box-shadow 属性结合实现。当用户交互（如鼠标悬停）时，阴影平滑地出现或变化，提升视觉体验。
1. 基础语法：box-shadow 与 transition 结合
box-shadow 用于设置元素的阴影效果，支持多个参数：水平偏移、垂直偏移、模糊半径、扩展半径和颜色。transition 控制这些值的变化过程，实现渐变动效。
常用写法：- box-shadow: 0 4px 8px rgba(0,0,0,0.2);
- transition: box-shadow 0.3s ease;
将 transition 应用在 box-shadow 上，就能让阴影的变化变得平滑。
2. 实现图片悬停阴影渐变
给图片添加默认无阴影状态，鼠标悬停时添加阴影，并通过 transition 实现淡入效果。
立即学习“前端免费学习笔记（深入）”；
示例代码：
img {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
transition: box-shadow 0.4s ease;
}
img:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
初始状态下阴影存在但透明（rgba 透明度为0），hover 时变为不透明，transition 自动计算中间帧，实现渐变动画。
3. 关键细节：避免 sudden jump
如果初始状态直接使用 box-shadow: none，浏览器无法对 "none" 到具体值做插值动画，会导致阴影突然出现。
正确做法：- 始终使用相同结构的 box-shadow 值，仅改变参数（如模糊值或透明度）。
- 用透明色替代 "none"，确保 transition 可追踪变化。
4. 扩展：多状态或复杂阴影动画
可同时改变多个参数，比如扩大阴影范围并加深颜色，创造更立体的效果。
例如：
img {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
img:hover {
box-shadow: 0 12px 24px rgba(0,0,0,0.3), inset 0 0 8px rgba(255,255,255,0.2);
}
配合 cubic-bezier 可定制缓动曲线，使动画更自然。
基本上就这些。关键是保持 box-shadow 格式一致，用透明控制显隐，再交给 transition 处理过渡。不复杂但容易忽略细节。
