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

你是否曾遇到这种情况：为一个设计精巧的提示框或带有伪元素的图标添加阴影，结果却出现一个方方正正的“小黑框”？本该贴合不规则轮廓的阴影，为何又变回了矩形？

问题的根源在于drop-shadow 的工作原理——它读取的是元素的 Alpha 通道（透明度边缘），而非盒模型的矩形边界。因此，如果直接给伪元素或子元素添加 filter: drop-shadow()，通常不会生效。成败的关键，取决于层级与容器控制。

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

一个最常见的错误是：将 drop-shadow 直接加在 ::before 伪元素上，或加在图标本身。结果阴影仍是方的。原因很简单：滤镜只对当前渲染层生效。伪元素、SVG、PNG 等具有透明边缘的元素，必须由同一层“蒙版”统一输出，阴影才能贴合轮廓。

正确的做法是：

• 将 filter: drop-shadow(...) 写在包含主内容与伪元素的最外层父容器上，例如 .tooltip 或 .bubble 这类包装元素。
• 该容器绝对不能设置 overflow: hidden。一旦设置，伪元素区域会被裁切，Alpha 轮廓也会被截断。
• 伪元素需要与主内容处于同一渲染层级，即两者必须作为该容器的子元素或伪元素，不可嵌套在子容器中。
• 如果使用 标签加载 PNG 图片，请确保它未被父容器的背景遮盖。更可控的做法是改用 background-image 或 。

参数写法和常见陷阱

再来看参数。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 蒙版做一次整体投影”。因此，容器结构、溢出控制、伪元素层级，这些比参数本身更能决定成败。