img元素默认display: inline，box-shadow对其无效；须显式设为inline-block或block，并检查父容器overflow及transform是否裁剪阴影。
img 元素默认不支持 box-shadow，必须先改 display
直接写 box-shadow: 0 2px 8px rgba(0,0,0,0.15) 却没效果？大概率是 img 还卡在 display: inline 状态。CSS 规范明确限制：box-shadow 对纯 inline 元素无效，上下边框还可能被 line-height 吞掉。
必须显式设置：
- display: inline-block：适合图文混排，保留基线对齐（必要时加 vertical-align: middle）
- display: block：更稳妥，尤其图片独占一行或需居中时
- 不要用 display: flex 或 grid 直接套在 img 上——会破坏盒模型，阴影仍可能异常
柔和阴影的关键参数组合
“柔和”不是靠加大 blur-radius 就行，而是偏移、模糊、透明度三者协同：
-
h-offset和v-offset控制阴影位置，推荐用小值（0～4px），避免飘离感 -
blur-radius决定软硬程度，8px～16px是常见柔和区间；超过20px易发虚、被父容器overflow: hidden裁剪 -
spread-radius省略即可（默认为0），它不参与“柔和”，只扩缩阴影尺寸 - 颜色优先用
rgba(0,0,0,0.1)～rgba(0,0,0,0.2)，太浓会压住图片细节
典型写法：box-shadow: 0 4px 12px rgba(0,0,0,0.15)
PNG 透明图用 drop-shadow() 更贴形，但有兼容代价
如果图片带 Alpha 通道（如圆形头像、图标 PNG），box-shadow 仍按矩形盒子投阴影，边缘会“出框”。这时该换 filter: drop-shadow()：
- 语法固定：
filter: drop-shadow(<offset-x><offset-y><blur-radius><color>)</color></blur-radius></offset-y></offset-x>，四项缺一不可 -
blur-radius不能省略（哪怕写0），且不支持spread和inset - 优势：按图像实际轮廓投影，不依赖
display类型，inline图片也能用 - 代价：IE 完全不支持；Edge 17 前需
-webkit-filter；移动端多层drop-shadow()易卡顿
示例：filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15))
阴影被裁剪？先查父容器的 overflow 和 transform
即使 box-shadow 或 drop-shadow() 写对了，阴影也可能“消失”——实际是被上级元素截断：
-
overflow: hidden是最常见元凶，尤其在border-radius+overflow: hidden的卡片容器里 -
transform（如scale、translateZ）会触发新层叠上下文，导致阴影渲染边界收缩 - flex/grid 容器若设了
align-items: center但没留足空间，阴影也会被挤掉
解决思路优先是预留空间：padding 或 margin 比强行改 overflow 更安全；若必须用裁剪容器，就别指望阴影外溢，老实用 box-shadow 配合容器本身加阴影
最容易被忽略的是：border-radius 只影响边框和 box-shadow 的形状，对 drop-shadow() 无效——后者永远按原始图像轮廓走，哪怕图片被容器圆角裁成椭圆，阴影还是照着原图矩形投。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
