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)
：半透明黑色，避免生硬死黑，更显立体真实
增强立体感的进阶技巧
单层阴影略显单薄，叠加多层可强化景深效果：
img {box-shadow:2px 2px 4px rgba(0, 0, 0, 0.15),6px 6px 16px rgba(0, 0, 0, 0.25);}
第一层：小偏移 + 小模糊 → 模拟紧贴图片的“内轮廓影”
第二层：大偏移 + 大模糊 → 模拟远处扩散的“主投影”，增强距离感
两层叠加后，图片看起来像微微抬离背景，立体感明显提升
配合 transform 微调，更自然
单纯阴影有时不够“可信”，加一点上移和缩放能强化悬浮效果：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
img {box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);transform: translateY(-2px);}
translateY(-2px)
让图片视觉上略往上提，阴影自然落在下方
再配合 hover 动态变化（如阴影变大、上移更多），还能做出“按压回弹”的交互感
注意适配图片容器
如果图片被包裹在
里，建议把阴影加在容器上，避免图片拉伸或裁剪干扰效果：
.img-frame {display: inline-block;box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);}
用
inline-block
保持容器尺寸贴合图片
避免父容器 overflow:hidden 裁掉阴影
需要圆角外框时，直接给容器加
border-radius
，阴影会自动跟随