CSS box-shadow可通过偏移、模糊和透明度模拟立体投影，单层基础写法为img{box-shadow:4px 4px 12px rgba(0,0,0,0.3)}；进阶用双层阴影增强景深，配合transform translateY(-2px)提升悬浮感，推荐将阴影加在inline-block容器上以避免裁剪。
用 CSS 的 box-shadow 可以轻松给图片加立体外框投影，关键是让阴影有偏移、模糊和深浅层次，模拟真实光源下的立体感。
基础立体投影写法
直接在 <img> 标签的样式中添加：
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
}
- 4px 4px：水平和垂直偏移，让阴影落在右下角，产生“浮起”错觉
- 12px：模糊半径，值越大阴影越柔和、越像自然光散射
- rgba(0,0,0,0.3)：半透明黑色，避免生硬死黑，更显立体真实
增强立体感的进阶技巧
单层阴影略显单薄，叠加多层可强化景深效果：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
box-shadow:
2px 2px 4px rgba(0, 0, 0, 0.15),
6px 6px 16px rgba(0, 0, 0, 0.25);
}
- 第一层：小偏移 + 小模糊 → 模拟紧贴图片的“内轮廓影”
- 第二层：大偏移 + 大模糊 → 模拟远处扩散的“主投影”，增强距离感
- 两层叠加后，图片看起来像微微抬离背景，立体感明显提升
配合 transform 微调，更自然
单纯阴影有时不够“可信”，加一点上移和缩放能强化悬浮效果：
立即学习“前端免费学习笔记（深入）”；
img {box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}
- translateY(-2px) 让图片视觉上略往上提，阴影自然落在下方
- 再配合 hover 动态变化（如阴影变大、上移更多），还能做出“按压回弹”的交互感
注意适配图片容器
如果图片被包裹在 <div> 里，建议把阴影加在容器上，避免图片拉伸或裁剪干扰效果：
<img src="photo.jpg" alt="">
</div> .img-frame {
display: inline-block;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
}
- 用
inline-block保持容器尺寸贴合图片 - 避免父容器 overflow:hidden 裁掉阴影
- 需要圆角外框时，直接给容器加
border-radius，阴影会自动跟随
