box-shadow给图片加阴影必须先设display:block或inline-block，因img默认为inline元素无独立盒模型；还需避免父容器overflow:hidden裁剪阴影，并合理设置rgba透明度与多层阴影色相统一。
box-shadow 是给图片加外部阴影颜色的唯一可靠方式，但直接写在 <img> 上大概率失效——根本原因不是参数错，而是 img 默认是 inline 元素，不生成独立盒模型，阴影无处可附着。
必须先改 display 才能生效
所有阴影参数再精准，没这一步都白搭：
- 加
display: block：适合图片独占一行、需居中或响应式宽高控制的场景 - 加
display: inline-block：适合图文混排，但要补vertical-align: middle防文字被顶高 - 别用
float或position: absolute替代——它们会破坏文档流，导致后续布局错乱
阴影颜色不是“随便挑个深色”
真正影响观感的是透明度与色相组合，不是 RGB 值本身：
- 避免纯黑
rgba(0,0,0,1)：太生硬，像贴纸；推荐rgba(0,0,0,0.15)～rgba(0,0,0,0.3) - 想显冷调/科技感？用
rgba(30, 60, 100, 0.2)而不是加蓝，否则易发灰 - 暖色阴影慎用：比如
rgba(200, 100, 50, 0.15)在浅背景上容易跳戏，只建议用于特定品牌色系统 - 多层阴影时，各层颜色应统一色相，仅调透明度和模糊值，否则视觉打架
父容器 overflow: hidden 是最常被忽略的裁剪源
阴影突然消失？90% 是这个原因：
立即学习“前端免费学习笔记（深入）”；
- 检查图片外层的
<div>、<figure>或 CSS Grid/Flex 容器是否带overflow: hidden - 临时验证：给父容器加
outline: 1px solid red，看阴影是否落在 outline 外 - 修复方案二选一：
padding-bottom: 12px（至少等于垂直偏移 + 模糊半径）或删掉overflow: hidden - 用
filter: drop-shadow()无法绕过此限制——它同样受父容器裁剪影响
真正难的不是调出颜色，而是让阴影在不同设备、不同缩放比、不同父级约束下始终稳定呈现。参数可以抄，但 display 和 overflow 这两处必须亲手确认。
