點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

通常而言，我們要想做一個元素具有陰影的效果，應該怎麼處理。

常見的方法大概有這麼幾種方式：

1、box-shadow - 給框添加一個或多個陰影

2、text-shadow- 給字體添加陰影

3、filter：drop-shadow - 生成整體陰影效果，和box-shadow相似。

大家有沒有發現，上面這些方式生成的陰影都只能是單色的。

如此說來，其實我們可以生成模擬的漸變或者顏色比較豐富的陰影效果。怎麼實現了？

組合使用CSS3濾鏡屬性（blur，brightness，opacity），這三個屬性的用法上一篇有做過介紹，也很簡單。

一，詳述過程

例子的DOM結構：

用一張圖片給div.avator設置一個背景。然後在div.avator上利用偽元素生成一個與原圖上一樣大小的新圖疊加在原圖之下，在利用濾鏡模糊blur配合其他的亮度/對比度，透明度等濾鏡，就可以完成一個虛幻的影子，偽裝成原圖的陰影效果，核心代碼如下：

效果圖是這樣的：

下面我將偽元素的scale在放大一倍，看看什麼效果：

出現另外一種不一樣的效果，挺有意思。

二，完整代碼

總結一下：

濾鏡的應用遠不止這個陰影，還有好多，主要看我們怎麼組合，想要什麼效果。後面我也會再舉一些實用的例子。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！