box-shadow 在前端的 CSS 編寫工作想必十分常見。但是 box-shadow 除去它的常規(guī)用法，其實還存在許多不為人知的奇技淫巧。

喜歡 markdown 版本的可以戳這里 。

?

box-shadow 常規(guī)用法

說到 box-shadow ，首先想到的必然是它能夠生成陰影，所以稱之為 shaodow ，簡單看看它的語法：

基礎(chǔ)屬性語法

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

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

像這樣?box-shadow: 10px 10px 5px #888888;?除此之外，我們要知道，box-shadow 是分外 shadow 和內(nèi) shadow 的，內(nèi)陰影即是在屬性上添加 inset 。

OK，本文已經(jīng)假設(shè)你對 box-shadow 有了一定的了解，在此基礎(chǔ)上，我們再看看 box-shadow 有什么其它妙用。

?

box-shadow 模擬多邊框

通常而言，我們會給許多元素添加邊框?border，但是當(dāng)如果需要多重邊框，這個時候，由于?border?單重的限制，box-shadow 就可以閃亮登場了。我們可以輕松的使用外陰影或者內(nèi)陰影來模擬邊框效果。

可以看到，由內(nèi)至外，這里利用 box-shadow ，設(shè)置了白色、黑色、灰色三層邊框及最外層帶模糊的陰影。

box-shadow 有一個參數(shù)是設(shè)置 blur 的，即是模糊的距離，在上面的例子中，即是第二重陰影?0 0 0 10px #333,?中的第三個 0 ，當(dāng) blur 的值為 0 ，那么陰影本身是不會模糊的，那么就很容易模擬出邊框的效果。

而且，元素可以設(shè)置多重陰影，并且它們存在層疊關(guān)系，離 box-shadow 最近設(shè)置的層疊優(yōu)先級最高，依次遞減，這個對照代碼很好理解。

當(dāng)然，值得注意的是：

• 陰影并不是邊框，它們并不占有實際的空間，也不能歸屬于?box-sizing?的范圍。不過，你可以通過使用內(nèi)邊距或外邊距（取決于陰影是內(nèi)部的還是外部的）占據(jù)額外的空間來模擬。

• 上述示例模擬的邊框是位于元素外部的。它不能捕獲類似懸停和點擊的鼠標(biāo)事件。如果事件很重要，那么可以通過添加 inset 關(guān)鍵字讓陰影出現(xiàn)在元素的內(nèi)部。注意，你可能需要添加額外的內(nèi)邊距來擴充空間。

?

box-shadow 模擬半透明遮罩層

很多時候，我們需要用到類似下圖這樣的遮罩層，通過半透明遮罩層把背景調(diào)暗，凸顯某些 UI 組件，提升用戶體驗。

常規(guī)的做法通常都會用到一個額外的元素，用作遮罩層，至少也是一個偽元素，?before?或者?after。

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

這里還有一個例子，hover 時利用配合 scale 放大元素， box-shadow 產(chǎn)生遮罩，聚焦用戶關(guān)注視野。

Demo–戳我看看。

當(dāng)然，值得注意的是：

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

• 由于每個人的瀏覽器視口大小不一致，為了所有情況下 box-shadow 生成的陰影都能覆蓋整個頁面，可能需要將陰影的尺寸?spread?設(shè)置的很大。

• 如果你真的想嘗試這個方法，box-shadow 從性能角度而言屬于?耗性能樣式，不同樣式在消耗性能方面是不同的，box-shadow 從渲染角度來講十分耗性能，原因就是與其他樣式相比，它們的繪制代碼執(zhí)行時間過長。雖然有 GPU 的 3D 加速，但是具體使用的時候還是值得斟酌考慮。不過你要知道，沒有不變的事情，在今天性能很差的樣式，可能明天就被優(yōu)化，并且瀏覽器之間也存在差異。

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

?

多重 box-shadow 之簡單圖形

從本質(zhì)上講，box-shadow 是將自身投影到另一個地方，在很多情況下，我們是可以利用 box-shadow 來復(fù)制自身的！

利用這個特性，我們可以用 box-shadow 制作一些簡單的圖形，在我的單標(biāo)簽圖形?Demo?中，有這樣一個圖形：

其中的云層，就是利用了?多重box-shaodw?在一個偽元素內(nèi)生成的。下面我利用不同的顏色，直觀的表達一下如何利用 box-shadow 繪制這個圖形：

當(dāng)所有陰影的顏色都是同色的時候，就很自然變成了一朵云朵：

當(dāng)然，腦洞夠大的話，更復(fù)雜一點的也是可以的，來看看下面這個圖形，也是由單個標(biāo)簽完成：

其中比較困難的是其中環(huán)繞字母 e 的那個圓以及那個切入的不規(guī)則角，看看用陰影怎么把它做出來，利用了兩重 box-shadow：

嗯，當(dāng)然，你問我這些圖形有什么用。我覺得實用性真的不強吧，我個人而言是興趣，從中獲取到了樂趣，同時也學(xué)到了很多東西，對屬性本身印象也更加深刻，遇到許多 CSS 方面的問題的時候，思路更加開闊。

更多有趣的圖形，可以?戳這里 – Demo

?

多重 box-shadow 實現(xiàn)立體感

這種方法運用在 text-shadow 上同樣可以，可以實現(xiàn)文字的立體感。

運用多重 box-shadow ，不斷偏移 1px ，就可以產(chǎn)生十分立體的感覺。

運用在按鈕：

運用在文字：

?

多重 box-shadow 實現(xiàn)任意圖片轉(zhuǎn)換

嗯，講真~~ 我覺得這個是最有趣的。

多重 box-shadow 還能做什么呢。由于 box-shadow 的多重性，也就是?無論多少重都可以，那么理論上任意一張圖片，每一個像素點都可以由一重 1px*1px 的 box-shadow 來表示。

為了完成這個任務(wù)，?canvas?剛好提供了一個方法?CanvasRenderingContext2D.getImageData?可以獲取到圖片每一個像素點的 rgba 值，那么圖片轉(zhuǎn)為一個完全由 box-shadow 表示的圖片是完全可行的。

為此，我倒騰了許久，寫了這么一個小插件，可以將任意圖片轉(zhuǎn)化為由 box-shadow 表示的單個 div 標(biāo)簽。

Demo–戳我體驗一下。

如果上面的幾點還有用武之地，那么這個功能我覺得除了看似厲害之外真的是毫無實用之處，上面也說了，box-shadow 是比較耗性能的，因為即便是一個?100px*100px?的圖形，轉(zhuǎn)化之后都有?10000?重陰影，無論是對性能還是可讀性而言，都是毀滅性的，但是講真，還是挺有趣的。

box-shadow 就先說這些吧，box-shadow 肯定還要其它的一些妙用，細心之人可以繼續(xù)挖掘之。

?

filter:drop-shadow

其實說到 box-shadow，就不得不提到另一個和它極為相似的 CSS3 新屬性?filter:drop-shadow，filter 即是 CSS 濾鏡，可以在元素呈現(xiàn)之前，為元素的渲染提供一些效果，如模糊、顏色轉(zhuǎn)移之類的。濾鏡常用于調(diào)整圖像、背景、邊框的渲染。

當(dāng)然這里我們只說 filter:drop-shadow。

filter:drop-shadow 也很好玩，本想繼續(xù)長篇大論討論下去，無奈發(fā)現(xiàn)?張鑫旭大神兩篇文章已經(jīng)把我想說的都囊括了，前人栽樹，后人乘涼，我也就不再獻丑了。

兩篇非常值得一讀的文章：

• CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別應(yīng)用

• PNG格式小圖標(biāo)的CSS任意顏色賦色技術(shù)

另外?《CSS SECRET》（CSS揭秘）這本大作也對?filter:drop-shadow?有詳細的描述，可以去看看。

?

希望這篇文章對大家有所幫助，尤其是在對問題解決的思維層面上。

到此本文結(jié)束，如果還有什么疑問或者建議，可以多多交流，寫文章不容易，覺得不錯的希望大家點個推薦。

原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。