图片悬停浮雕效果需用CSS的filter（drop-shadow）配合transform和transition模拟明暗立体错觉，核心是右下灰影+左上白影叠加及轻微缩放，纯HTML无法实现。
让图片悬停时呈现浮雕效果，核心是利用 CSS 的 filter（特别是 drop-shadow）配合 transform 和 transition 模拟光影错觉，而非真正改变图像深度。纯 HTML 无法实现，必须搭配 CSS。
用 filter + transform 制造浮雕感
浮雕效果本质是“亮边+暗边”的立体错觉。可通过叠加方向性阴影 + 微位移实现：
- 给图片加
filter: drop-shadow(2px 2px 2px #aaa) drop-shadow(-2px -2px 2px #fff)：一个偏右下灰影模拟暗面，一个偏左上白影模拟高光 - 配合
transform: translateZ(2px)（需父容器设transform-style: preserve-3d）增强纵深感，但更常用的是轻微缩放或位移增强交互反馈 - 添加
transition: all 0.2s ease让变化平滑
基础 HTML + CSS 示例
直接可用的精简代码：
<img src="example.jpg" alt="浮雕效果图片" class="emboss-hover">
<style>
.emboss-hover {
display: inline-block;
transition: all 0.25s ease;
}
.emboss-hover:hover {
filter:
drop-shadow(1px 1px 1px rgba(0,0,0,0.3))
drop-shadow(-1px -1px 1px rgba(255,255,255,0.8));
transform: scale(1.02);
}
</style>
说明：双方向阴影形成明暗对比，scale(1.02) 轻微放大增强“凸起”感知，rgba 控制阴影透明度避免生硬。
立即学习“前端免费学习笔记（深入）”；
进阶：用伪元素叠加浮雕边框
若需更强控制，可用 ::before 绘制高光/阴影边框：
- 给图片容器设
position: relative -
::before绝对定位覆盖四边，用线性渐变模拟斜面反光 - 悬停时改变渐变角度或透明度，配合
z-index层级变化强化立体感
注意事项
实际使用中需注意：
- 避免过度阴影导致图片边缘发虚，建议模糊值（第三参数）≤2px
- 深色背景上慎用白色高光，可改用浅灰
rgba(240,240,240,0.7) - 移动端 hover 不触发，如需兼容请额外加
focus-within或点击态 - 滤镜性能较好，但大量图片同时悬停时建议启用硬件加速：
transform: translateZ(0)
