CSS3的fliter:drop-shadow

文章專區

網頁設計相關文章

fliter:drop-shadow顧名思義就是投影濾鏡，因此透明的部分不會有效果，可以用在將圖片加上陰影等等。

chrome瀏覽器需加上-webkit-

數值設定:

fliter:drop-shadow(x偏移 y偏移模糊大小顏色)

例：fliter:drop-shadow(4px 5px 5px #000)

fliter:drop-shadow與box-shadow的差異

可能看上面範例會覺得跟box-shadow這屬性沒什麼兩樣，但看以下範例就能清楚明瞭：

.pic01{-webkit-filter: drop-shadow(5px 5px 8px #000); }

.pic03{ box-shadow:5px 5px 8px #000; }

明明png圖片的背景是透明的，但是box-shadow的陰影卻還是以白背景做呈現，而fliter:drop-shadow卻能夠以實際投影的方式做出陰影效果。兩者的陰影效果也有所不同，box-shadow的陰影較深且模糊範圍較小，fliter:drop-shadow則是陰影較淺、模糊範圍偏大。

下次發現圖片加陰影還是會留一大片空白時，不妨使用fliter:drop-shadow唷！