CSS drop-shadow() 函数

定义和用法

CSS 的 drop-shadow() 滤镜函数为图像应用投影效果。

实例

例子 1

为图像添加不同的投影效果：

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

亲自试一试

例子 2

为图像添加不同的投影效果（使用负值的水平和垂直阴影）：

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

亲自试一试

CSS 语法

drop-shadow(h-shadow v-shadow blur spread color)
值 描述
h-shadow

必需。指定水平阴影的像素值。

负值将阴影放置在图像的左侧。
v-shadow

必需。指定垂直阴影的像素值。

负值将阴影放置在图像的上方。
blur

可选。为阴影添加模糊效果，单位为像素。

值越大，模糊效果越强（阴影会变得更大且更淡）。

不允许使用负值。

如果未指定值，则默认为 0（阴影边缘清晰）。
spread

可选。必须为像素值。

正值会使阴影扩展并变大，负值会使阴影缩小。

如果未指定，则默认为 0（阴影与元素大小相同）。
color

可选。为阴影添加颜色。

如果未指定，颜色取决于浏览器（通常为黑色）。

技术细节

版本： CSS Filter Effects Module Level 1

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
18 12 35 6 15

相关页面

参考：CSS filter 属性

参考：CSS blur() 函数

参考：CSS brightness() 函数

参考：CSS contrast() 函数

参考：CSS grayscale() 函数

参考：CSS hue-rotate() 函数

参考：CSS invert() 函数

参考：CSS opacity() 函数

参考：CSS saturate() 函数

参考：CSS sepia() 函数