最直接方式是用CSS的box-shadow属性配合display:block或inline-block，因img默认为inline元素，box-shadow对其无效；需确保无overflow:hidden裁剪，且border-radius须加在img自身以协同阴影形状。
用 box-shadow 给图片加阴影最直接
HTML 中的 <img> 本身不支持阴影属性，必须靠 CSS 的 box-shadow 实现。它作用在图片所在的“盒模型”上，所以只要图片是块级或设置了 display: block，阴影就能正常显示。
常见错误是直接写 <img src="x.jpg" style="box-shadow: 2px 2px 4px #000"> 却没生效——多数因为图片默认是行内元素，阴影被截断或不渲染。解决方法很简单：
- 给
<img>加display: block（推荐）或display: inline-block - 确保父容器没有
overflow: hidden，否则阴影可能被裁掉 - 阴影参数顺序固定：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色；后两项可省略
示例：
<img src="photo.jpg" style="display: block; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
要圆角+阴影一起出现，必须配 border-radius
只加 box-shadow 是方形投影；想让阴影贴合圆角图片，border-radius 必须和 box-shadow 同时存在，且不能设在父容器上（否则阴影还是方的）。
立即学习“前端免费学习笔记（深入）”；
关键点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
border-radius要加在<img>元素自身上 - 如果用了
object-fit: cover或图片被裁剪，border-radius仍有效，但阴影形状取决于盒模型边界，不是图片内容边界 - 避免同时设
border和大border-radius，否则边框圆角和阴影圆角可能错位
示例（带圆角的卡片式图片）：
<img src="avatar.jpg" style="display: block; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
filter: drop-shadow() 和 box-shadow 的区别在哪
filter: drop-shadow() 看起来类似，但它作用于图片的“像素轮廓”，能跟随透明背景或不规则形状（比如 PNG 图标），而 box-shadow 只围绕矩形盒。
使用场景差异明显：
- 普通照片、头像、卡片图 → 用
box-shadow更可控、性能更好 - 带透明区域的图标、剪贴画、SVG 导出的 PNG →
filter: drop-shadow(0 2px 4px #000)才能让阴影“贴着图形走” -
filter不受overflow: hidden影响，但无法设置扩展半径，也不支持多层阴影 - 部分老版 Safari 对
filter渲染有偏移，建议加transform: translateZ(0)强制硬件加速
响应式图片加阴影容易漏掉的兼容问题
当图片用 <picture> 或 srcset 响应式加载时，阴影本身没问题，但要注意两点：
- 不要把
box-shadow写在<source>上（无效），必须写在最终渲染的<img>标签上 - 如果用 JS 动态替换
src，记得同步检查display和border-radius是否还在，某些懒加载库会重置内联样式 - 在移动设备上，过大的模糊值（如
box-shadow: 0 0 30px）可能导致渲染卡顿，建议模糊半径 ≤ 16px
真正麻烦的是高对比度模式（Windows / macOS 系统级设置）：阴影可能完全不可见。如果可访问性要求高，别只依赖阴影表达层级，配合间距、边框或背景色变化更稳妥。
