drop-shadow() - CSS（层叠样式表） 编辑

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a <filter-function>.

这个交互式示例的源代码存储在GitHub存储库中。如果您想对交互式示例项目作出贡献，请克隆 https://github.com/mdn/interactive-examples 并向我们发送拉取请求。

投影实际上是输入图像的alpha蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面。

注意: 这个函数有点类似于 box-shadow 属性.  box-shadow 属性在元素的整个框后面创建一个矩形阴影, 而 drop-shadow() 过滤器则是创建一个符合图像本身形状(alpha通道)的阴影。

Syntax

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

The drop-shadow() function accepts a parameter of type <shadow> (defined in the box-shadow property), with the exception that the inset keyword is not allowed.

Parameters

offset-x offset-y (required)

offset-x指定水平距离，其中负值将阴影放置到元素的左侧。offset-y指定垂直距离，其中负值将阴影置于元素之上。如果两个值都为 0，则阴影直接放置在元素后面。

blur-radius (optional)

阴影的模糊半径，指定为 <length>。值越大，阴影就越大，也越模糊。如果未指定，则默认为 0，从而产生清晰、不模糊的边缘。不允许有负值。

spread-radius (optional)

阴影的扩展半径，指定为 <length>. 正的值会导致阴影扩大和变大，而负的值会导致阴影缩小。如果未指定，则默认为0，阴影的大小将与输入图像相同。

大多数浏览器不支持这个参数;如果使用，效果将不会呈现。截止2020年10,14日,Chrome  v.85.0.4183.121（正式版本）,Microsoft Edge Beta  v85.0.564.63(64位), Firefox v.85.0.564.63 暂未支持

color (optional)

阴影的颜色，指定为 <color>。如果未指定，则使用 color 属性的值。

Examples

/* Black shadow with 10px blur */
drop-shadow(16px 16px 10px black)

/* Reddish shadow with 1rem blur and .3rem spread */
/* WARNING: not generally supported by browsers */
drop-shadow(.5rem .5rem 1rem .3rem #e23)

See also

• <filter-function>
• CSS box-shadow property
• blur()
• brightness()
• contrast()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()