css box-shadow可通过偏移、模糊和透明度模拟立体投影，单层基础写法为img{box-shadow:4px 4px 12px rgba(0,0,0,0.3)}；进阶用双层阴影增强景深，配合transform translatey(-2px)提升悬浮感，推荐将阴影加在inline-block容器上以避免裁剪。

用 CSS 的 box-shadow 可以轻松给图片加立体外框投影，关键是让阴影有偏移、模糊和深浅层次，模拟真实光源下的立体感。

基础立体投影写法

直接在 <img> 标签的样式中添加：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

img {
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
}

• 4px 4px：水平和垂直偏移，让阴影落在右下角，产生“浮起”错觉
• 12px：模糊半径，值越大阴影越柔和、越像自然光散射
• rgba(0,0,0,0.3)：半透明黑色，避免生硬死黑，更显立体真实

增强立体感的进阶技巧

单层阴影略显单薄，叠加多层可强化景深效果：

img {
  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> 里，建议把阴影加在容器上，避免图片拉伸或裁剪干扰效果： <font face="monospace"><div class="img-frame"> <br>   <img src="photo.jpg" alt=""><br> </div></font> <font face="monospace">.img-frame {<br>   display: inline-block;<br>   box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);<br> }</font> <ul> <li>用 <code>inline-block 保持容器尺寸贴合图片

避免父容器 overflow:hidden 裁掉阴影

需要圆角外框时，直接给容器加 border-radius，阴影会自动跟随