首先介绍一下，css3中有两个属性可设置投影，分别是：
box-shadow:x偏移, y偏移, 模糊大小, 色值;
filter:drop-shadow(x偏移, y偏移, 模糊大小, 色值)
二者有什么区别？
1. 兼容性
box-shadow：从IE9+开始兼容
box-shadow兼容性
filter:drop-shadow：从IE13+兼容
drop-shadow兼容性
从上图可知，box-shadow在兼容性上做的更好。而drop-shadow还只能在新版本的浏览器中使用，对老旧浏览器并不友好
2. 阴影叠加
filter:drop-shadow不支持阴影叠加
阴影叠加是你可以对一个元素重复进行阴影设置，使用box-shadow可以极限叠加，不考虑性能的话，甚至可以拼出你想要的任何形状。
关于box-shadow阴影叠加属性可以点击这里box-shadow阴影叠加技术应用
3. 内阴影
filter:drop-shadow不支持内阴影
3. 阴影效果
为了展示，我这里使用虚线形式的边框查看效果
height: 25px;
width: 30px;
border:3px dashed #666;
box-shadow：
box-shadow: 5px 5px 0;
drop-shadow：
filter:drop-shadow(5px 5px 0);
从这两张图可以初见端倪了对吗？
drop-shadow实际应用
重头戏来了，从二者的阴影效果上可以看出，box-shadow本质上是盒模型的投影，而drop-shadow才是真正意义上的投影。
所以，纵然drop-shadow有着对兼容性要求高，无法设置内阴影，无法叠加阴影等很多不足，但它的特性决定了它无法被box-shadow取代的地位。
1. 不规则图形的投影
这个好理解，使用标签和css构造的多边形，如三角形、或者上面写的虚线边框等，就可以使用drop-shadow为它设置自然的投影
2. 升级功能：改变图标颜色
<i class="icon">
<i class="icon-del"></i>
</i>
对于上述html结构，我们想要插入一个黑色的定位图标。而目前的素材只有一个蓝色的图标
.icon{
display: inline-block;
position: relative;
height:30px;
width: 40px;
}
.icon-del {
background: url(location.png) no-repeat;
height:100%;
width:100%;
display: inline-block;
}
这么写能让蓝色图标正常显示，那么如何将这个图标变为黑色呢？
首先我们为这个图标设置投影
.icon >.icon-del {
filter: drop-shadow(20px 0 #000);
}
再设置偏移量，和投影偏移相等，同时为父元素设置
overflow:hidden;
.icon{
overflow:hidden; //新增
display: inline-block;
position: relative;
height:30px;
width: 40px;
}
.icon >.icon-del {
filter: drop-shadow(20px 0 #000);
position: relative;
left: -20px;
}
最终效果，原图标隐藏，只显示投影，看上去就好像是改变了图标的颜色啦！
文章参考：
png小图标CSS赋色demo
张鑫旭CSS3 filter:drop-shadow滤镜与box-shadow区别应用
咦，我是不是让你们少了勾搭UI小姐姐的机会？
溜了溜了
