box-shadow对img无效主因是其默认display: inline，css规范禁止对纯inline元素应用该属性；须显式设为inline-block或block，并注意vertical-align对齐。
直接给 <img> 写 box-shadow 没反应？八成是没改 display，不是参数写错了。
为什么 box-shadow 对图片无效
因为 <img> 默认是 display: inline，而 CSS 规范明确禁止对纯 inline 元素应用 box-shadow。这不是浏览器 bug，是标准行为。
- 上下
border也会被line-height遮住，看着像“消失”了 - 哪怕参数调得再准——比如
0 4px 6px rgba(0,0,0,0.15)——阴影照样不渲染 - 必须显式设置
display: inline-block或display: block - 若图文混排，优先用
inline-block；加一句vertical-align: middle防止文字被顶高
box-shadow 参数怎么配才像“底部阴影条”
它不能真正只画底部，但人眼会被偏移+模糊组合“骗过”。关键不是裁剪，而是让阴影主体沉在正下方、边缘快速衰减。
- 垂直偏移（第二个值）必须为正：如
4px、6px；负值会让阴影往上飘 - 水平偏移（第一个值）设为
0，避免左右扩散 - 模糊半径（第三个值）控制在
4px–8px：太大（＞12px）会晕到左右，失去“条感” - 扩散半径（第四个值）建议
0或1px–2px；负值（如-2px）可收紧边缘，但小图上易显生硬 - 典型写法：
box-shadow: 0 6px 8px 0 rgba(0,0,0,0.12)
PNG 透明图或不规则轮廓，该用 drop-shadow()
box-shadow 总是按矩形盒子投，而 filter: drop-shadow() 跟着图片 Alpha 通道走——毛边、圆角、镂空图标都能自然贴合。
- 语法更简单：
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3))，四个参数顺序固定，缺一不可 - 不依赖
display类型，inline图片也能直接用 - 不支持
inset，也不接受逗号分隔的多层写法（drop-shadow() drop-shadow()在旧版 Safari 会失效） - IE 完全不支持；Edge 17+、Chrome 117+、Firefox 115+、Safari 16.4+ 均可用
- 若父容器有
overflow: hidden或border-radius，drop-shadow()可能穿出边界，此时反而该退回box-shadow+ 容器控制
阴影突然不见了？先查这三处
90% 的“阴影消失”问题跟参数无关，是布局上下文搞的鬼。
- 父容器设了
overflow: hidden：阴影区域被裁掉，临时加outline: 1px solid red看是否落在外面 - 父容器用了
transform（如scale、translateZ）：可能触发新层叠上下文或渲染边界，导致阴影截断 - 图片在
flex或grid容器中，且align-items: center等属性未预留足够空间：阴影超出内容区被剪 - 修复思路优先是加
padding或调整margin预留空间，而不是粗暴去掉overflow: hidden
最常被忽略的细节：改完 display 后，如果图片嵌在文字流里，vertical-align 的默认值（baseline）会让文字和图片底部不对齐——这不是阴影问题，但会让你误以为整个样式“没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
