如何运用CSS Drop-shadow滤镜为不规则形状添加真实投影？

drop-shadow能贴合不规则轮廓是因为读取Alpha通道而非盒模型边界；必须作用于最外层容器且不能设overflow:hidden，伪元素需与主内容同级，参数仅支持x/y偏移、模糊半径和颜色，无spread和inset。

drop-shadow 能贴合不规则轮廓，是因为它读取的是元素的 Alpha 通道（透明度边缘），不是盒模型矩形边界。 直接给伪元素或子元素加 filter: drop-shadow() 通常无效——关键在层级和容器控制。

必须作用于最外层包裹容器

常见错误：给 ::before 或图标本身加 drop-shadow，结果阴影还是方的。这是因为滤镜只对当前渲染层生效，而伪元素、SVG、PNG 的透明边缘必须由同一层“蒙版”统一输出。

• 把 filter: drop-shadow(...) 写在包含主内容 + 伪元素的**最外层父容器**上（比如 .tooltip 或 .bubble）
• 该容器不能设 overflow: hidden，否则会裁掉伪元素区域，Alpha 轮廓被截断
• 伪元素需与主内容同级渲染（即都作为该容器的子级或伪元素），不能嵌套在子容器里
• 如果用 <img> 标签加载 PNG，确保它没被父容器背景遮盖——优先改用 background-image 或 <svg> 更可控

参数写法和常见陷阱

drop-shadow() 看似和 box-shadow 语法一样，但少两个关键能力：没有 spread-radius，也不支持 inset。写错参数会被浏览器静默忽略。

• 正确写法：filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.12)) —— 只有四个值：x 偏移、y 偏移、模糊半径、颜色
• 错误写法：filter: drop-shadow(2px 2px 4px 2px #000) —— 第四个数值（spread）会被丢弃，不报错但无效
• 想模拟“底部加强阴影”？别硬调负 offset-y + 大 blur-radius，容易糊成一团；改用伪元素叠加一层 box-shadow 更精准
• 发光效果建议用纯色而非 rgba()，例如 drop-shadow(0 0 12px #00aaff)；多层发光可用逗号分隔：drop-shadow(0 0 8px #ff00aa) drop-shadow(0 0 16px #00aaff)

性能和兼容性注意事项

滚动或 hover 动画中频繁重绘的区域，慎用 drop-shadow。它触发的是全量图像滤镜计算，开销明显高于 box-shadow。

立即学习“前端免费学习笔记（深入）”；

• 静态卡片、弹窗、图标等无交互区域：放心用
• 列表项 hover、轮播图切换、拖拽实时阴影：优先用 box-shadow + border-radius 模拟，或用伪元素绘制简化阴影
• 旧版 Safari 需加 -webkit-filter 前缀，但 iOS 13+ 已基本无需
• 透明 PNG 若阴影不可见，先检查导出是否保留完整 Alpha 通道——有些工具（如 Sketch 导出时勾选“忽略透明度”）会直接丢掉

真正容易被忽略的点是：drop-shadow 不是“给某个形状加阴影”，而是“对当前渲染层的 Alpha 蒙版做一次整体投影”。所以容器结构、溢出控制、伪元素层级，比参数本身更决定成败。