最直接有效的方式是组合使用box-shadow和border，但需先将img设为inline-block或block以确保渲染生效；否则因默认inline特性，边框会被line-height遮挡、阴影完全不显示。
box-shadow 和 border 是最直接有效的组合，但必须确保 img 元素不是纯 inline 渲染状态，否则边框可能被行高“吃掉”，阴影根本不会出现。
为什么直接写 border: 1px solid #000 或 box-shadow: 0 2px 4px #000 没效果
根本原因在于 img 默认是 display: inline 元素：
- 上下
border会被父容器的line-height遮挡，视觉上“消失” -
box-shadow对纯inline元素完全不生效（CSS 规范明确限制） - 没写单位，比如
border: 1 solid red→ 必须是1px、0.1em等合法值 - 父容器设置了
overflow: hidden，而阴影超出范围被裁剪
img 必须加 display: inline-block 或 block
这是所有效果能正常显示的前提，不是可选项：
-
display: inline-block适合图文混排场景，保留基线对齐能力 -
display: block更稳妥，尤其当图片需居中或独占一行时 - 加了之后，
vertical-align可能影响行内布局，必要时设为top或middle - 示例：
.photo { display: inline-block; vertical-align: middle; }
box-shadow 参数顺序和常见误配
顺序错一个就全乱，且不报错——只渲染成默认值或失效：
- 正确顺序：
h-offset v-offset blur-radius spread-radius color -
blur-radius为0时是硬边阴影；省略则默认为0 - 想让阴影紧贴边框？把
h-offset和v-offset设为0：box-shadow: 0 0 6px rgba(0,0,0,0.2) - 要内阴影？必须加
inset关键字：box-shadow: inset 0 0 8px #ccc，它永远在border内侧，无法盖住边框 - 多层阴影用逗号分隔，但移动端慎用超过 2 层，滚动时易卡顿
圆角 + 边框 + 阴影 的协同要点
border-radius 不只是让图片变圆，它直接影响阴影形态：
-
border和box-shadow默认都跟随border-radius走，但blur-radius过大会让阴影边缘“发虚”，看起来脱离图片轮廓 - 若用了
border-radius: 50%（正圆），但图片不是等宽高，会拉伸变形 → 先用object-fit: cover保证比例 - 阴影被裁？补上
overflow: hidden到外层容器，或确保父元素没有overflow: hidden - 推荐组合：
border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
最容易被忽略的是：即使写了 border-radius，如果图片本身有透明区域（如 PNG），阴影仍会按矩形盒模型渲染——这时该换用 filter: drop-shadow()，但它不支持 inset 且 IE 完全不兼容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
