css `dorp-shadow`

昔人'2025-10-20 23:12

drop-shadow() 是 CSS 中一个非常实用且强大的滤镜属性，用于为元素（特别是非矩形元素）添加真实的阴影效果

drop-shadow() 是 CSS filter 属性的一个函数。它沿着元素的 Alpha通道（透明度蒙版）来生成阴影。这意味着阴影会贴合元素的实际形状，而不仅仅是它的矩形边框

css 复制代码

filter: drop-shadow(offset-x offset-y blur-radius spread-radius color);

参数解释：

offset-x (必需): 水平阴影距离。正值阴影在右边，负值在左边。

offset-y (必需): 垂直阴影距离。正值阴影在下边，负值在上边。

blur-radius (可选): 阴影的模糊半径。值越大，阴影越模糊、越淡。不能为负值。如果省略，默认为 0，产生一个硬边阴影。

spread-radius (可选): 阴影的扩展半径。正值会使阴影扩大和变粗，负值会使阴影缩小。这个参数不常用，并且部分浏览器可能不支持。

color (可选): 阴影的颜色。如果省略，颜色由浏览器的默认值决定（通常是 currentColor，但不同浏览器可能不同，所以建议显式指定）。

关键观察点

box-shadow: 为所有元素创建矩形阴影，忽略透明区域

drop-shadow: 完美贴合每个元素的真实形状，包括透明部分

💡 使用建议

使用 box-shadow 处理常规布局阴影

使用 drop-shadow 处理图标、不规则图形和透明元素
See the Pen css`dorp-shadow` by liu874396180 ( @liu874396180) on CodePen.