點擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
通常而言，我們要想做一個元素具有陰影的效果，應該怎麼處理。
常見的方法大概有這麼幾種方式：
1、box-shadow - 給框添加一個或多個陰影
2、text-shadow- 給字體添加陰影
3、filter：drop-shadow - 生成整體陰影效果，和box-shadow相似。
大家有沒有發現，上面這些方式生成的陰影都只能是單色的。
如此說來，其實我們可以生成模擬的漸變或者顏色比較豐富的陰影效果。怎麼實現了？
組合使用CSS3濾鏡屬性（blur，brightness，opacity），這三個屬性的用法上一篇有做過介紹，也很簡單。
一，詳述過程
例子的DOM結構：
用一張圖片給div.avator設置一個背景。然後在div.avator上利用偽元素生成一個與原圖上一樣大小的新圖疊加在原圖之下，在利用濾鏡模糊blur配合其他的亮度/對比度，透明度等濾鏡，就可以完成一個虛幻的影子，偽裝成原圖的陰影效果，核心代碼如下：
效果圖是這樣的：
下面我將偽元素的scale在放大一倍，看看什麼效果：
出現另外一種不一樣的效果，挺有意思。
二，完整代碼
總結一下：
濾鏡的應用遠不止這個陰影，還有好多，主要看我們怎麼組合，想要什麼效果。後面我也會再舉一些實用的例子。
分享到:
閱讀更多 小鄭搞碼事 的文章
