试一试
filter: drop-shadow(30px 10px 4px #4444dd);
filter: drop-shadow(0 -6mm 4mm rgb(160 0 210));
filter: drop-shadow(0 0 0.75rem crimson);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
投影实际上是输入图像的 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(#ee2233 0.5rem 0.5rem 1rem)
/* Pass multiple drop-shadows to a filter to stack them */
drop-shadow(10px 10px red) drop-shadow(-5px -5px yellow)
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>
<div>
drop-shadow(1px 1px red) drop-shadow(1px -1px red) drop-shadow(-1px 1px red)
drop-shadow(-1px -1px 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: #222222;
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 -16px red);
}
div:nth-child(5) {
filter: drop-shadow(1px 1px red) drop-shadow(1px -1px red)
drop-shadow(-1px 1px red) drop-shadow(-1px -1px red);
}
在第一个框的 drop-shadow() 函数中没有 <color> 值的情况下，阴影使用元素（lime）的 color 属性值。第二个和第三个阴影说明长度和颜色值可以以任何顺序指定。第三个阴影显示了指定第三个 <length> 值时的模糊效果。第四个阴影使用负偏移，将阴影向左和向上移动。第五个示例显示了如何在单个元素上使用多个投影。
规范
| 规范 |
|---|
| 滤镜效果模块第 1 级 # funcdef-filter-drop-shadow |
浏览器兼容性
加载中…