drop-shadow()

**drop-shadow()** CSS 函数将投影效果应用于输入图像。其结果为 <filter-function>。

试试看

投影实际上是输入图像 alpha 遮罩的模糊、偏移版本，以特定颜色绘制并在图像下方合成。

注意：此函数与 box-shadow 属性有些类似。box-shadow 属性在元素的整个盒子后面创建矩形阴影，而 drop-shadow() 过滤器函数创建的阴影符合图像本身的形状（alpha 通道）。

语法

css

/* Two length values */
/* drop-shadow( <length> <length> ) */
drop-shadow(5px 5px)

/* Three length values */
/* drop-shadow( <length> <length> <length> ) */
drop-shadow(5px 5px 15px)

/* Two length values and a color */
/* drop-shadow( <length> <length> <color> ) */
drop-shadow(5px 5px red)

/* Three length values and a color */
/* drop-shadow( <length> <length> <length> <color> ) */
drop-shadow(5px 5px 15px red)

/* The order of color and length values can be changed */
/* drop-shadow( <color> <length> <length> <length> ) */
drop-shadow(#e23 0.5rem 0.5rem 1rem)

drop-shadow() 函数接受类型为 <shadow> 的参数（在 box-shadow 属性中定义），但 inset 关键字和 spread 参数除外。

参数

<color> 可选: 指定阴影的颜色。如果未指定，则使用父元素中定义的 color 属性的值。
<length>: 指定阴影的偏移长度。此参数接受两个或三个值。如果指定了两个值，则将其解释为 <offset-x>（水平偏移）和 <offset-y>（垂直偏移）值。负 <offset-x> 值将阴影放置在元素的左侧。负 <offset-y> 值将阴影放置在元素的上方。如果未指定，则使用 0 作为缺失长度的值。如果指定了第三个值，则将其解释为 <standard-deviation>，它是高斯模糊函数的标准偏差值。较大的 <standard-deviation> 值会创建更大、更模糊的阴影。不允许 <standard-deviation> 的负值。

正式语法

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )

示例

设置投影

html

<div>drop-shadow(16px 16px)</div>
<div>drop-shadow(16px 16px red)</div>
<div>drop-shadow(red 1rem 1rem 10px)</div>
<div>drop-shadow(-16px -16px red)</div>

css

div {
  display: inline-block;
  margin: 0 0.5rem 2rem 1rem;
  padding: 0.5rem;
  height: 100px;
  width: 190px;
  vertical-align: top;
  background-color: #222;

  color: lime;
}

div:nth-child(1) {
  filter: drop-shadow(16px 16px);
}

div:nth-child(2) {
  filter: drop-shadow(16px 16px red);
}

div:nth-child(3) {
  filter: drop-shadow(red 1rem 1rem 10px);
}

div:nth-child(4) {
  filter: drop-shadow(-16px -6px red);
}

在第一个框中，如果 drop-shadow() 函数中没有 <color> 值，则阴影将使用元素的 color 属性的值（lime）。第二个和第三个阴影说明长度和颜色值可以按任何顺序指定。第三个阴影显示当指定第三个 <length> 值时产生的模糊效果。第四个阴影使用负偏移量，这会将阴影移到左侧和顶部。

规范

规范
过滤器效果模块级别 1 # funcdef-filter-drop-shadow

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

其他可用于 filter 和 backdrop-filter 属性值的 <filter-function> 函数包括