首先介紹一下拯腮，css3中有兩個屬性可設(shè)置投影查排，分別是：
box-shadow:x偏移, y偏移, 模糊大小, 色值;
filter:drop-shadow(x偏移, y偏移, 模糊大小, 色值)
二者有什么區(qū)別？
1. 兼容性
box-shadow：從IE9+開始兼容
box-shadow兼容性
filter:drop-shadow：從IE13+兼容
drop-shadow兼容性
從上圖可知，box-shadow在兼容性上做的更好涧狮。而drop-shadow還只能在新版本的瀏覽器中使用酪碘，對老舊瀏覽器并不友好
2. 陰影疊加
filter:drop-shadow不支持陰影疊加
陰影疊加是你可以對一個元素重復(fù)進行陰影設(shè)置朋譬，使用box-shadow可以極限疊加，不考慮性能的話兴垦，甚至可以拼出你想要的任何形狀徙赢。
關(guān)于box-shadow陰影疊加屬性可以點擊這里box-shadow陰影疊加技術(shù)應(yīng)用
3. 內(nèi)陰影
filter:drop-shadow不支持內(nèi)陰影
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實際應(yīng)用
重頭戲來了狡赐，從二者的陰影效果上可以看出窑业，box-shadow本質(zhì)上是盒模型的投影，而drop-shadow才是真正意義上的投影阴汇。
所以数冬，縱然drop-shadow有著對兼容性要求高，無法設(shè)置內(nèi)陰影搀庶，無法疊加陰影等很多不足拐纱，但它的特性決定了它無法被box-shadow取代的地位。
1. 不規(guī)則圖形的投影
這個好理解哥倔，使用標(biāo)簽和css構(gòu)造的多邊形秸架，如三角形、或者上面寫的虛線邊框等咆蒿，就可以使用drop-shadow為它設(shè)置自然的投影
2. 升級功能：改變圖標(biāo)顏色
<i class="icon">
<i class="icon-del"></i>
</i>
對于上述html結(jié)構(gòu)东抹，我們想要插入一個黑色的定位圖標(biāo)。而目前的素材只有一個藍色的圖標(biāo)
.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;
}
這么寫能讓藍色圖標(biāo)正常顯示沃测，那么如何將這個圖標(biāo)變?yōu)楹谏兀?/p>
首先我們?yōu)檫@個圖標(biāo)設(shè)置投影
.icon >.icon-del {
filter: drop-shadow(20px 0 #000);
}
再設(shè)置偏移量，和投影偏移相等蒂破，同時為父元素設(shè)置
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;
}
最終效果馏谨，原圖標(biāo)隱藏，只顯示投影附迷，看上去就好像是改變了圖標(biāo)的顏色啦惧互！
文章參考：
png小圖標(biāo)CSS賦色demo
張鑫旭CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別應(yīng)用
咦，我是不是讓你們少了勾搭UI小姐姐的機會喇伯？
溜了溜了
