drop-shadow()

翻译不完整。 请帮助我们翻译这篇文章!

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

投影实际上是输入图像的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