drop-shadow()才是透明png的正确解，因其基于alpha通道生成贴合轮廓的阴影，而box-shadow仅作用于矩形边界；参数为offset-x offset-y blur-radius color，不支持spread-radius，且对隐藏元素无效。
直接用 filter: drop-shadow()，别碰 box-shadow —— 后者会给透明 PNG 套个方框阴影，完全违背“贴合轮廓”的需求。
为什么 drop-shadow() 才是透明 PNG 的正确解
因为 drop-shadow() 读取的是图片的 alpha 通道（即实际不透明像素的形状），不是元素的矩形边界。一张剪影 PNG、带圆角/镂空的图标、手绘风格的透明图，阴影会严丝合缝地沿着边缘扩散；而 box-shadow 只管容器宽高，阴影永远是死板的矩形，哪怕你加了 border-radius 也救不回来。
常见错误现象：box-shadow 下透明 PNG 四周出现“灰边”或“发光框”，尤其在浅色背景上特别刺眼。
-
drop-shadow()参数中没有spread-radius（box-shadow特有），别照搬写法 - 多数浏览器忽略第四个参数（
spread-radius）——写了也无效，删掉更安全 - 颜色推荐用
rgba()，比如rgba(0, 0, 0, 0.2)，避免硬边和过重感
drop-shadow() 的标准写法与参数避坑
语法必须是：filter: drop-shadow(offset-x offset-y blur-radius color)，四者顺序不能乱，前两个必填，后两个可选。
实操建议：
-
offset-x和offset-y用px或em，别用百分比（不支持） -
blur-radius建议从4px~12px起调，0是硬边，>20px易发虚、失真 - 别写
filter: drop-shadow(2px 2px 8px #000 2px)—— 最后的2px是box-shadow的spread-radius，drop-shadow()不认，会导致整条声明失效 - 想多层阴影？不行。
drop-shadow()不支持逗号分隔的多值，要模拟就套两层div+ 分别加滤镜（但慎用，性能下降明显）
兼容性与真实可用范围
现代项目基本无压力：Chrome 53+、Firefox 49+、Safari 9.1+、iOS Safari 9.3+、Android Browser 4.4+ 都支持。IE 完全不支持（IE11 及以下无视 filter），如果必须兼容 IE，得降级用 box-shadow + 伪元素描边模拟，但效果打折。
性能提示：对单个图标或小图，drop-shadow() 渲染开销比等效 box-shadow 略低；但若对大图（如 >800px 宽）或滚动区域里大量使用，可能触发频繁重绘，卡顿可感知。
- 移动端注意：老版本微信内置浏览器（X5 内核 v3.x）对
blur-radius > 10px渲染异常，建议上限设为8px - 动画慎用：给
filter加transition（如 hover 时放大模糊）在低端安卓机上容易掉帧 - 调试技巧：临时加
outline: 1px solid red看元素真实尺寸，确认阴影是否真的贴合内容而非盒子
最易被忽略的一点：drop-shadow() 对 opacity: 0 或 visibility: hidden 的元素**不生效**——它依赖渲染树中的可见像素。想“只留阴影不留图”，得用父容器 box-shadow 或位移+裁剪等间接方案，不能指望直接隐藏原图还保留 drop-shadow。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
