img 默认 inline 导致 box-shadow 被截断，设 display: block 或 inline-block 即可解决；drop-shadow 贴合透明边缘但兼容性差，box-shadow 控制矩形阴影更稳定；真漂浮需 transform 上浮+同步增强阴影+transition 缓动。
直接给 <img> 加 box-shadow 就能出投影，但必须先设 display: block 或 display: inline-block，否则阴影常被裁掉或位置飘忽——这是 90% 投影不显示的根源。
为什么 box-shadow 常失效？
<img> 默认是 inline 元素，它的盒模型高度只算内容高，不包含行框（line box），导致 box-shadow 的垂直偏移部分被父容器截断。常见现象包括：
- 阴影只显示下半截，或完全看不见
- 图片底部多出空白，像被“顶起来”一样
- 加了
vertical-align: baseline后阴影彻底消失
解决方法就一条：img { display: block; } 或 img { display: inline-block; vertical-align: middle; }。如果图片在链接里，也建议把 <a></a> 设为 inline-block，而不是只调图片。
drop-shadow() 和 box-shadow 怎么选？
两者都能投，但行为完全不同：
-
drop-shadow()贴合图片 Alpha 通道边缘，PNG/SVG 透明图轮廓有多歪，阴影就有多贴——但不支持inset，也不能写多个逗号分隔值（第二项会覆盖第一项） -
box-shadow作用于元素盒边界，矩形框多大，阴影就多大；JPG 和带圆角的容器用它更可控 - 旧版 Safari、部分安卓 WebView 对
filter: drop-shadow()渲染不稳定，容易发虚或丢影 - 如果图片用了
transform: scale()，Chrome 旧版本可能直接不渲染drop-shadow()
推荐组合：img { display: block; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.15)); }（透明图）或 div.img-card { border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }（带圆角卡片）。
怎么做出“漂浮”感，不是平铺投影？
真漂浮 = 微上浮 + 阴影加深 + 过渡缓动。关键不在阴影多强，而在位移与阴影变化同步：
- 用
transform: translateY(-4px)比margin-top: -4px更高效，不触发重排 - 悬停时
box-shadow要同时加大偏移、模糊和透明度，例如从0 2px 6px rgba(0,0,0,0.1)变为0 6px 16px rgba(0,0,0,0.15) - 必须加
transition: all 0.3s ease，否则就是“啪”一下跳上去，毫无浮力感 - 如果想强化立体错觉，可给容器加伪元素
::before模拟底层投影，再配transform: translateY(2px)
注意：移动端没有 :hover，纯靠悬停实现的漂浮对触屏无效；如需兼容，得额外加 :focus-within 或 JS 点击态切换 class。
最易忽略的一点：所有阴影参数里的单位必须统一（比如全用 px），rgba() 里的 alpha 值别设太高（>0.2 容易压暗图片），模糊半径超过 12px 在小图上就开始糊边——漂浮感来自克制，不是堆参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
