[CSS3] drop-shadow與box-shado大不同，讓CSS也可為透明圖片加上陰影

　　上星期曾與大家分享instagram.css的相片濾鏡特效套件，讓圖片完全不用透過Photoshop，就能套用各種不同的相片風格，這一切都是歸功於CSS3的Filter屬性，而Filter就像Photoshop中的濾鏡特效一樣，同時這個Filter屬性中，共包含了十種的特效，像是灰階、懷舊、負片、模糊…..等，且只要在網頁中加入這個Filter屬性後，立即就會針對網頁的元素進行渲染與套用，讓相片立即產生不一樣的變化，其效果就像套用了Photoshop中的濾鏡效果一般的自然。

　　而今天要來介紹的，一樣是CSS3的Fliter濾鏡中的drop-shadow，而什麼是drop-shadow，或許有些朋友，可能會感到陌生，但提到box-shadow，各位應該就很熟悉了，而drop-shadow與box-shadow，都是用來將元素加入陰影，但比較不同的是box-shadow加入的陰影只有矩形，因此當使用的是去背影像，套用box-shadow並不會因為透明背景，而沿著元素的四周加入陰影，所以這時候就可透過drop-shadow來實現，在透明的png檔中的影像四周，加入陰影，其效果就像在Photoshop一模一樣，甚至Filter的濾鏡，還可加疊，所以就可在一個元素中，加入多個不同的Filter特效，因此現在就一塊來看看CSS3的Filter屬性吧！

---

Step1
首先，先將影像去背，並儲存為png或svg檔，而這邊梅干上網抓了一張Android娃娃的透明背景的圖片。

---

Step2
這時當使用box-shadow:0px 0px 10px rgba(0,0,0,.5);的語法時，可看到影子只會以矩形的方式呈現。

---

Step3
這時將box-shadow更改為，filter:drop-shadow(0px 0px 10px rgba(0,0,0,.5));，影子立即就會沿著，影像四周產生出陰影，是不是超酷的呀！

---

Step4
而濾鏡效果是可疊加的，因此當要加入多個特效時，只需要空一格，再加入特效名稱，像梅干就加了二個，一個是影子，一個是對比，filter:drop-shadow(0px 0px 10px rgba(0,0,0,.5)) contrast(200%);而這時它就會套用影子，再套用對比，因此有了這概念，就可套用多個不同的濾鏡特效啦！是不是超方便的呀！

---

#範例預覽

查看更多的filter特效