【CSS進階】box-shadow 與 filter:drop-shadow 詳解及奇技淫巧

box-shadow 在前端的 CSS 編寫工做想必十分常見。可是 box-shadow 除去它的常規用法，其實還存在許多鮮爲人知的奇技淫巧。

喜歡 markdown 版本的能夠戳這裏 。

 

box-shadow 常規用法

說到 box-shadow ，首先想到的必然是它可以生成陰影，因此稱之爲 shaodow ，簡單看看它的語法：

基礎屬性語法

box-shadow 屬性向框添加一個或多個陰影。

box-shadow: h-shadow v-shadow blur spread color inset;

像這樣 box-shadow: 10px 10px 5px #888888; 除此以外，咱們要知道，box-shadow 是分外 shadow 和內 shadow 的，內陰影便是在屬性上添加 inset 。

OK，本文已經假設你對 box-shadow 有了必定的瞭解，在此基礎上，咱們再看看 box-shadow 有什麼其它妙用。

 

box-shadow 模擬多邊框

一般而言，咱們會給許多元素添加邊框 border，可是當若是須要多重邊框，這個時候，因爲 border 單重的限制，box-shadow 就能夠閃亮登場了。咱們能夠輕鬆的使用外陰影或者內陰影來模擬邊框效果。

能夠看到，由內至外，這裏利用 box-shadow ，設置了白色、黑色、灰色三層邊框及最外層帶模糊的陰影。

box-shadow 有一個參數是設置 blur 的，便是模糊的距離，在上面的例子中，便是第二重陰影 0 0 0 10px #333, 中的第三個 0 ，當 blur 的值爲 0 ，那麼陰影自己是不會模糊的，那麼就很容易模擬出邊框的效果。

並且，元素能夠設置多重陰影，而且它們存在層疊關係，離 box-shadow 最近設置的層疊優先級最高，依次遞減，這個對照代碼很好理解。

固然，值得注意的是：

• 陰影並非邊框，它們並不佔有實際的空間，也不能歸屬於 box-sizing 的範圍。不過，你能夠經過使用內邊距或外邊距（取決於陰影是內部的仍是外部的）佔據額外的空間來模擬。

• 上述示例模擬的邊框是位於元素外部的。它不能捕獲相似懸停和點擊的鼠標事件。若是事件很重要，那麼能夠經過添加 inset 關鍵字讓陰影出如今元素的內部。注意，你可能須要添加額外的內邊距來擴充空間。

 

box-shadow 模擬半透明遮罩層

不少時候，咱們須要用到相似下圖這樣的遮罩層，經過半透明遮罩層把背景調暗，凸顯某些 UI 組件，提高用戶體驗。

常規的作法一般都會用到一個額外的元素，用做遮罩層，至少也是一個僞元素， before 或者 after。

不考慮低版本的兼容性的話，其實用 box-shadow 也能夠模擬遮罩層這種效果。

這裏還有一個例子，hover 時利用配合 scale 放大元素， box-shadow 產生遮罩，聚焦用戶關注視野。

Demo–戳我看看。

固然，值得注意的是：

• 使用這種方法不可避免的須要考慮兼容性，IE9+、Firefox 四、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。

• 因爲每一個人的瀏覽器視口大小不一致，爲了全部狀況下 box-shadow 生成的陰影都能覆蓋整個頁面，可能須要將陰影的尺寸 spread 設置的很大。

• 若是你真的想嘗試這個方法，box-shadow 從性能角度而言屬於 耗性能樣式，不一樣樣式在消耗性能方面是不一樣的，box-shadow 從渲染角度來說十分耗性能，緣由就是與其餘樣式相比，它們的繪製代碼執行時間過長。雖然有 GPU 的 3D 加速，可是具體使用的時候仍是值得斟酌考慮。不過你要知道，沒有不變的事情，在今天性能不好的樣式，可能明天就被優化，而且瀏覽器之間也存在差別。

下面再講講多重 box-shadow 能幹啥：

 

多重 box-shadow 之簡單圖形

從本質上講，box-shadow 是將自身投影到另外一個地方，在不少狀況下，咱們是能夠利用 box-shadow 來複制自身的！

利用這個特性，咱們能夠用 box-shadow 製做一些簡單的圖形，在個人單標籤圖形 Demo 中，有這樣一個圖形：

其中的雲層，就是利用了 多重box-shaodw 在一個僞元素內生成的。下面我利用不一樣的顏色，直觀的表達一下如何利用 box-shadow 繪製這個圖形：

當全部陰影的顏色都是同色的時候，就很天然變成了一朵雲朵：

固然，腦洞夠大的話，更復雜一點的也是能夠的，來看看下面這個圖形，也是由單個標籤完成：

其中比較困難的是其中環繞字母 e 的那個圓以及那個切入的不規則角，看看用陰影怎麼把它作出來，利用了兩重 box-shadow：

嗯，固然，你問我這些圖形有什麼用。我以爲實用性真的不強吧，我我的而言是興趣，從中獲取到了樂趣，同時也學到了不少東西，對屬性自己印象也更加深入，遇到許多 CSS 方面的問題的時候，思路更加開闊。

更多有趣的圖形，能夠 戳這裏 – Demo

 

多重 box-shadow 實現立體感

這種方法運用在 text-shadow 上一樣能夠，能夠實現文字的立體感。

運用多重 box-shadow ，不斷偏移 1px ，就能夠產生十分立體的感受。

運用在按鈕：

運用在文字：

 

多重 box-shadow 實現任意圖片轉換

嗯，講真~~ 我以爲這個是最有趣的。

多重 box-shadow 還能作什麼呢。因爲 box-shadow 的多重性，也就是 不管多少重均可以，那麼理論上任意一張圖片，每個像素點均可以由一重 1px*1px 的 box-shadow 來表示。

爲了完成這個任務， canvas 恰好提供了一個方法 CanvasRenderingContext2D.getImageData 能夠獲取到圖片每個像素點的 rgba 值，那麼圖片轉爲一個徹底由 box-shadow 表示的圖片是徹底可行的。

爲此，我倒騰了許久，寫了這麼一個小插件，能夠將任意圖片轉化爲由 box-shadow 表示的單個 div 標籤。

Demo–戳我體驗一下。

若是上面的幾點還有用武之地，那麼這個功能我以爲除了看似厲害以外真的是毫無實用之處，上面也說了，box-shadow 是比較耗性能的，由於即使是一個 100px*100px 的圖形，轉化以後都有 10000 重陰影，不管是對性能仍是可讀性而言，都是毀滅性的，可是講真，仍是挺有趣的。

box-shadow 就先說這些吧，box-shadow 確定還要其它的一些妙用，細心之人能夠繼續挖掘之。

 

filter:drop-shadow

其實說到 box-shadow，就不得不提到另外一個和它極爲類似的 CSS3 新屬性 filter:drop-shadow，filter 便是 CSS 濾鏡，能夠在元素呈現以前，爲元素的渲染提供一些效果，如模糊、顏色轉移之類的。濾鏡經常使用於調整圖像、背景、邊框的渲染。

固然這裏咱們只說 filter:drop-shadow。

filter:drop-shadow 也很好玩，本想繼續長篇大論討論下去，無奈發現 張鑫旭大神兩篇文章已經把我想說的都囊括了，前人栽樹，後人乘涼，我也就再也不獻醜了。

兩篇很是值得一讀的文章：

• CSS3 filter:drop-shadow濾鏡與box-shadow區別應用

• PNG格式小圖標的CSS任意顏色賦色技術

另外 《CSS SECRET》（CSS揭祕）這本大做也對 filter:drop-shadow 有詳細的描述，能夠去看看。

 

但願這篇文章對你們有所幫助，尤爲是在對問題解決的思惟層面上。

到此本文結束，若是還有什麼疑問或者建議，能夠多多交流，寫文章不容易，以爲不錯的但願你們點個推薦。

原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。