用 box-shadow 给 img 加阴影需先设 display: block 或 inline-block，因其对 inline 元素无效；filter: drop-shadow() 更适配透明 PNG 且不受 display 限制，但 IE 不支持。
用 box-shadow 给 ![HTML5如何设置图片阴影_HTML5设置图片阴影操作【效果】]()
HTML5 本身没有专门设置图片阴影的标签或属性，实际靠 CSS 的 box-shadow 实现。只要图片是块级或行内块（display: inline-block 或 block），就能正常渲染阴影。
常见错误是直接给 box-shadow 却没生效——大概率因为图片默认是行内元素，而 box-shadow 对纯行内元素（display: inline）不生效。
- 给
display: block或display: inline-block - 阴影参数顺序别写反：
box-shadow: h-offset v-offset blur spread color - 避免和父容器的
overflow: hidden冲突，阴影可能被裁掉
img {
display: block;
box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.2);
}
filter: drop-shadow() 更适合带透明背景的 PNG
box-shadow 是围绕元素盒模型的矩形投影，而 filter: drop-shadow() 是按图像 Alpha 通道生成阴影，能真实贴合图片轮廓（比如毛边、圆形头像、不规则图标）。
注意：它属于 CSS Filter，不是盒子模型属性，所以不受 display 类型限制，inline 图片也能用；但 IE 完全不支持，Edge 17+ 才开始支持。
立即学习“前端免费学习笔记（深入）”；
- 语法：
filter: drop-shadow() -
blur-radius必填，不能省略（哪怕写0） - 不支持
spread参数，想扩大阴影得靠增大blur-radius
img.png-icon {
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
阴影被截断？检查父容器的 overflow 和 transform
即使 box-shadow 或 drop-shadow 写对了，阴影也可能“消失”——实际是被父级裁剪了。
典型场景：
- 父元素设置了
overflow: hidden（比如轮播图容器、卡片border-radius+overflow: hidden） - 父元素用了
transform（如scale、translateZ），触发了新的层叠上下文或渲染边界 - 图片在
flex或grid容器中，且父容器设了align-items: center等，导致内容溢出未预留空间
解决思路优先加 padding 或调整 margin 预留阴影空间，而不是强行改 overflow。
需要动态控制阴影？用 JS 操作 style.boxShadow 或 style.filter
如果要响应用户交互（比如 hover、点击、滚动）切换阴影，直接改元素的 style 属性最快：
- 改
box-shadow：img.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)' - 改
drop-shadow：img.style.filter = 'drop-shadow(0 2px 6px rgba(0,0,0,0.2)') - 注意：JS 设置时，
filter会覆盖其他 filter 效果（如grayscale），需合并写
复杂逻辑建议用 class 切换，把阴影定义在 CSS 里，JS 只负责增删 class —— 更易维护，也避免内联样式优先级干扰。
真正要注意的是：阴影效果是否随设备像素比（dpr）缩放，以及在高对比度模式下是否仍可读。这些细节常被忽略，但直接影响实际体验。
