[003]filter:drop-shadow属性

版权声明：本文为博主原创文章，未经博主允许不得转载。 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就会出现这种情况

挑战

1. 用filter:drop-shadow来实现麦当劳标志
   
   效果预览
   代码地址