CSS3 透過 Filter 濾鏡屬性，讓不規則的區塊，也能產生陰影的效果

　　自從CSS3新增了許多屬性後，讓現在在製作網頁，大幅的減少圖像的製作，同時還加速了網頁的載入速度，而今天梅干要來分享一個，相當實用的特效，以往若要在區塊中加陰影，就得將圖片儲存成PNG並帶半透明，才會有陰影的效果，不但圖檔變得相當大，載入時間也變長，同時當要調整陰影的強弱時，就得重新開啟檔案，調整後再另存成網頁格式，過程有些繁鎖，但自從有了CSS3提供的陰影這屬性後，終於不用再透過影像工具來處理了。

直接透過CSS3的陰影屬性，不但可設定陰影的顏色、模糊的比例、影子的強弱，但這只限於四方形的區塊，若圖像為不規則時，就會出現陰影會以矩形區塊來顯示，就會顯得有些奇怪，好在CSS3還有另一個濾鏡的屬性，同時這濾鏡的屬性內建支援陰影效果，因此只要透過這個濾鏡的屬性，就能輕鬆實現在不規則的區塊中，顯示陰影的效果啦！

---

Step1
一般只要在物件上，加入box-shadow陰影特效時，這時在物件的四周就會出現淡淡的陰影效果。

---

Step2
因此這時只要稍作調整，將box-shadow->filter: drop-shadow()，這樣就可實在，在不規則的物件中，顯示陰影的效果啦！因此有需要的朋友，也趕快學起來囉！！