box-shadow 是给图片加投影效果的标准解法，直接作用于 元素即可；若需配合 border-radius 显示圆角阴影，应改用 filter: drop-shadow()。
用 box-shadow 给图片加边框阴影最直接
别用 border 配合阴影模拟——那只是“看起来像”，真正要的是图片自身带投影效果。box-shadow 是标准解法，作用在 <img> 元素本身就行，不需要额外包裹 <div>（除非你后续要加悬停或圆角等复杂交互）。
<p>常见错误是把 <code>box-shadow 写在父容器上，结果阴影被图片裁剪或位置偏移；或者误以为必须设 display: block 才生效——其实只要图片不是内联默认行为干扰布局（比如后面跟着文字），多数情况直接加就行。
-
box-shadow: 0 4px 8px rgba(0,0,0,0.2);：横向偏移 0、向下 4px、模糊半径 8px、半透明黑 - 如果图片有
max-width: 100%或响应式设置，box-shadow会随尺寸缩放，无需额外处理 - 注意：IE9 及更早版本不支持
box-shadow，如需兼容得用 PNG 阴影图或 JS 插件
图片带圆角时阴影不跟边角走？加 overflow: hidden 不靠谱
给 <img> 加了 border-radius 后，阴影还是方的——这是因为 box-shadow 默认按元素原始矩形区域投射，不随圆角裁剪。有人试过在外层 <div> 上设 <code>overflow: hidden，但这样会把阴影一起剪掉，反而没效果。
正解是用 clip-path 配合 box-shadow，或者改用 filter: drop-shadow()：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));：它会尊重border-radius，阴影自然贴合圆角 - 但
drop-shadow()性能略低于box-shadow，大量图片滚动时可能轻微卡顿 - 不支持多层阴影（
box-shadow可逗号分隔写多个）
想让阴影只出现在图片外侧，避免内侧透出？小心 inset
默认 box-shadow 是外阴影，但如果你发现阴影“跑进图片里”，大概率是图片本身有透明背景（PNG）且父容器背景色和阴影色接近，造成视觉误判。真要内阴影才用 inset，比如：box-shadow: inset 0 0 12px rgba(0,0,0,0.1); ——但这不是边框阴影，而是“压暗图片边缘”效果。
- 外阴影：去掉
inset关键字，确保第一个长度值是横向偏移（通常为 0） - 阴影太淡？提高
rgba()第四个参数（如从0.1改到0.25）比加粗模糊值更可控 - 阴影太硬？增大第二个值（垂直偏移）和第三个值（模糊半径）的比例，例如
0 6px 16px比0 2px 4px更柔
响应式页面中阴影消失或错位？检查父容器 transform 和 will-change
在用 transform: scale(0.9) 或 will-change: transform 做动画优化时，box-shadow 可能被截断或渲染异常——这是浏览器图层合成策略导致的，不是代码写错。
- 临时解决：给图片加
transform: translateZ(0)强制创建新图层 - 长期建议：优先用
filter: drop-shadow()，它不受transform影响 - 调试技巧：在开发者工具里勾选 “Show user agent shadow DOM”，看是否被其他样式覆盖
box-shadow 和 filter: drop-shadow() 选一个就好，混用反而增加不可控性。圆角+阴影这种组合，drop-shadow() 看着省心，但得接受它没法像 box-shadow 那样精细控制内外偏移。
