答案：通过设置img为inline-block，使用box-shadow与transition属性，结合rgba透明度和cubic-bezier缓动函数，可实现图片阴影的平滑渐变悬停效果，支持多层阴影与内外阴影组合，并注意性能优化与兼容性。
在CSS中为图片添加阴影并实现平滑的渐变过渡效果，关键在于正确使用 box-shadow 和 transition 属性。只要设置得当，鼠标悬停时阴影可以自然浮现或扩大，提升页面交互质感。
基础结构：给图片添加可过渡的阴影
首先确保图片元素支持 box-shadow（通常需要是块级或内联块级）。img 标签默认是内联元素，建议设置为 inline-block 或 block。
初始状态可以设置一个较弱或透明的阴影，hover 时变为明显阴影：
img {
display: inline-block;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
transition: box-shadow 0.3s ease;
}
img:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
使用透明度控制过渡平滑性
想要阴影“慢慢浮现”，关键是调整 rgba 中的 alpha 通道（透明度），配合 transition 实现淡入效果。
- 初始状态用低透明度或零模糊的阴影
- hover 状态提升模糊值和透明度
- 推荐使用
ease或cubic-bezier(0.4, 0, 0.2, 1)缓动函数更自然
进阶技巧：多层阴影与内外阴影结合
通过逗号分隔多个阴影值，可以创建更丰富的层次感：
img {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0),
inset 0 1px 0 rgba(255, 255, 255, 0);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
img:hover {
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
注意：如果同时修改了多个阴影属性，建议用 transition: all 或明确列出 box-shadow。
优化性能与兼容性提示
- 避免对大量图片同时应用复杂阴影过渡，可能影响渲染性能
- 移动端可适当减少阴影模糊半径，防止模糊过重
- 始终保留
border-radius与overflow: hidden的容器配合，防止阴影溢出 - 老版本浏览器需检查 transition 与 box-shadow 支持情况
基本上就这些。掌握 box-shadow 的透明度变化 + transition 定义，就能做出自然的图片阴影渐变效果。不复杂但容易忽略细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
