假設現在有這樣一個需求，視覺需要給下面這張SVG圖中的每一個元素都加上陰影，如圖所示的陰影效果：
大家第一想到的是用什麼來實現呢？要是在之前，想也不用想，直接是設計師設計好後，切圖就了事。
現在就得好好想想來，因為CSS3提供來兩個實現陰影的屬性即：box-shadow和drop-shadow。
對前端有興趣或者正在學習web前端的小夥伴，可以私信小編【學習】即可免費領取2018最新的一整套系統web前端學習教程！
估計大部分人都是想到了用box-shadow這個屬性來實現，先來使用它來試試看，看會得到什麼效果：
我們的需求是需要給每一個鳥都加上陰影，而使用box-shadow，則並沒有實現我們想要的效果。box-shadow顧名思意“盒陰影”，只是盒子的陰影。所以出現上面的效果也是意料之中了。
這個時候就是該輪到drop-shadow出場了，drop-shadow是CSS3中filter（濾鏡）中陰影濾鏡，它就符合真實世界的投影，非透明的顏色，就有投影；透明部分，光線穿過，沒投影。
而我們的圖形剛好又是SVG格式的，每一個元素就是些文本節點，剛好符合drop-shadow概念中的那樣，有透明和非透明部分，所以用它再適合不過了。
drop-shadow語法如下：
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
我們只需要使用drop-shadow就可以實現我們給每一個元素加陰影的需求：
filter:drop-shadow(-25px 25px 25px rgba(26,58,70,0.7));
僅僅一句就可以實現下圖所示的陰影效果：
分享到:
閱讀更多 吐泡泡魚 的文章
