版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/strongbill/article/details/82871963
filter:drop-shadow
drop-shadow(h-shadow v-shadow blur spread color)
跟box-shadow的参数差不多,至不够没有了inset(内阴影的参数)
常用写法
filter: drop-shadow(20px 20px 0px red);
drop-shadow相比box-shadow的最大的优势就是,它才是真正意义上的投影
div{
width: 30px;
height: 30px;
border: 10px dashed yellow;
box-shadow: 20px 20px 0 red;
}
div{
width: 30px;
height: 30px;
border: 10px dashed yellow;
filter: drop-shadow(20px 20px 0 red);
}
在box-shadow中,我们中间是镂空的,可是它的投影却不是。显然这不符合我们的要求。那它有什么用呢,那就是它可以完完全全的复制颜色单一的镂空物体。
看下面的挑战,麦当劳中的m是有两个n所拼接而成的,若是平时我们就用:before来创建左半边的n,然后在用:after来创建右半边的n,然后在通过绝对定位把他们拼接在一起。
现在我们可以只创建出一个n,然后利用filter: drop-shadow(16em 0 0 yellow);
若是用box-shadow就会出现这种情况