1.寫在前面

在CSS3中，可以使用box-shadow屬性來創(chuàng)建陰影效果來給二維平面增加深度效果，這個屬性在前端開發(fā)中使用的非常多，例如segmentfault的首頁就是使用了box-shadow屬性來增加深度效果，今天我們就一起來看看這個屬性。

2.box-shadow的基本語法

box-shadow: [x-offset y-offset blur-radius spread-radius color,inset ]+

其中，+在正則表達式中表示一次或者多次的意思，也就是說box-shadow可以支持同時設(shè)置多個陰影。

首先我們來看下基本參數(shù)的含義：

• none：默認值，設(shè)置后表示沒有陰影效果；
• inset：該值后表示內(nèi)陰影，如果不設(shè)置，則默認表示外陰影；
• x-offset/y-offset：分別表示陰影在水平方向和垂直方向上的偏移量，支持正值和負值的設(shè)置，正值表示向右下方偏移，負值表示向左上方偏移；
• blur-radius：陰影的模糊距離，只能設(shè)置0或者正值，值越大則表明陰影的邊緣越模糊；
• spread-radius：陰影的擴展半徑（可省略，默認為0），支持正值和負值，正值表示陰影擴展，負值表示陰影縮小。這個屬性在box-shadow中是相對比較難理解的一個屬性，在文章后面會詳細講到這個屬性的意義；
• color：陰影的顏色，如果不設(shè)置，則會使用瀏覽器默認的顏色 。

在對box-shadow的每一個參數(shù)進行說明后，可能大家還是一點概念沒有，不知道該怎么用。那么首先讓我們來看一個大家經(jīng)常使用box-shadow的方法：指定三個長度值和一個顏色值來實現(xiàn)陰影效果，如下所示：

box-shadow: 2px 3px 4px rgba(0,0,0,.5); 復制代碼

在瀏覽器中的效果如下：

最終，我們實現(xiàn)實現(xiàn)了左側(cè)和底部邊框陰影的效果，但是大家有沒有想過box-shadow繪制陰影的原理是什么嗎？繪制原理請看下一節(jié)。

3.box-shadow繪制陰影的原理

下圖以圖形化的形式說明了陰影是如何繪制的，以下面的代碼為例：

.box{width: 200px;height: 200px;background-color: #fb3;box-shadow: 2px 3px 4px rgba(0,0,0,.5); } 復制代碼

那么繪制陰影的步驟會以下面的步驟進行：

（1）以該元素相同的尺寸和位置，畫一個rgb(0,0,0,.5)的矩形，如下圖1所示；

（2）把圖1的矩形向右移2px，向下移3px，如下圖2所示;

（3）使用高斯模糊算法（或者類似的算法）將它進行4px的模糊處理，本質(zhì)上表示在陰影邊緣發(fā)生陰影色和純透明色之間的顏色過渡長度近似于模糊半徑的兩倍，如下圖3所示；

（4）模糊后矩形與原始元素的交集部分會被切除掉，因此，最后看到的陰影效果如下圖4所示，也就是我們最終看到的陰影效果。

準確的說，我們將在頂部看到1px的陰影（4px-3px）、在左側(cè)看到2px(4px-2px)、在右側(cè)看到6px(4px+2px)、在底部看到7px(4px+3px)。在實踐中，投影看起來會比這些值稍小，因為投影的顏色在邊緣處的過渡不是線性的。

說完了box-shadow的繪制原理，下面將結(jié)合例子對box-shadow的每一個屬性做詳細的說明

4.box-shadow屬性詳解

4.1 x-offset

x-offset用來聲明陰影在水平方向上的偏移量。如果為正數(shù)，則陰影在元素的右側(cè)；如果為負數(shù)，則陰影在元素的左側(cè)。如下代碼所示：

box-shadow: 10px 0 5px 0 rgba(0,0,0,.5); 復制代碼box-shadow: -10px 0 5px 0 rgba(0,0,0,.5); 復制代碼

在瀏覽器中的效果如下所示：

第一幅圖中，設(shè)置x-offset為10px，在右側(cè)產(chǎn)生了陰影；第二幅圖中，設(shè)置x-offset為-10px，則在左側(cè)產(chǎn)生了陰影。

4.2 y-offset

y-offset用來聲明陰影在垂直方向上的偏移量。如果為正數(shù)，則陰影在元素的方側(cè)；如果為負數(shù)，則陰影在元素的上方。如下代碼所示：

box-shadow: 0 10px 5px 0 rgba(0,0,0,.5); 復制代碼box-shadow: 0 -10px 5px 0 rgba(0,0,0,.5); 復制代碼

在瀏覽器中的效果如下所示：

第一幅圖中，設(shè)置y-offset為10px，在底部產(chǎn)生了陰影；第二幅圖中，設(shè)置y-offset為-10px，則在頂部產(chǎn)生了陰影。

4.3 blur-radius

blur-radius 表示陰影的模糊半徑，值越大，則陰影越模糊，該屬性不支持負值。如下代碼所示：

box-shadow: 0 0 0 0 rgba(0,0,0,.5); 復制代碼box-shadow: 0 0 20px 0 rgba(0,0,0,.5); 復制代碼box-shadow: 0 0 50px 0 rgba(0,0,0,.5); 復制代碼

第一幅圖中，設(shè)置x-offset、y-offset、blur-radius為0px，即不位移，不模糊，則沒有任何陰影的效果；第二幅圖中，設(shè)置blur-radius為20px，第三幅圖中社會組blur-radius為50px，可以看到，blur-radius值越大，則陰影越模糊。

4.4 spread-radius

這個屬性是box-sizing中最難理解的。我們先來看以下的例子：

box-shadow: 0px 0px 0px 20px deeppink; 復制代碼

可以看到20px的邊框效果：

然后，我們動態(tài)更改blur-radius，可以看到模糊的是邊框部分，也是顏色為deeppink的邊框。

其實，我們可以將spread-radius理解成元素blur的“margin”，為正的時候漸變向外擴張、為負的時候漸變向內(nèi)收縮。

4.5 color

color表示陰影的顏色，支持css中任意的顏色。如下代碼所示：

.box1{box-shadow: 0 0 50px 0 darkgreen; } .box2{box-shadow: 0 0 50px 0 deeppink; } .box3{box-shadow: 0 0 50px 0 blue; } 復制代碼

在瀏覽器中的效果如下所示：

三幅圖中，設(shè)置陰影的顏色各不相同，則會產(chǎn)生相應的陰影效果。

4.6 inset

陰影默認是外陰影，可以使用inset關(guān)鍵字指定陰影為外陰影。如下代碼所示：

.box1{box-shadow: 0 0 50px 0 darkgreen inset; } .box2{box-shadow: 0 0 50px 0 deeppink inset; } .box3{box-shadow: 0 0 50px 0 blue inset; } 復制代碼

在瀏覽器中的效果如下所示：

三幅圖中，設(shè)置陰影為內(nèi)陰影，最終陰影是在元素內(nèi)部生成的。

5.box-shadow屬性之案例

5.1 單側(cè)投影

代碼如下：

box-shadow: 0 5px 4px -4px blue; 復制代碼

這個例子比較好理解，在瀏覽器中的效果如下：

5.2 雙側(cè)投影

當我們只想設(shè)置在元素的兩條邊上的陰影時，好像比較麻煩。因為擴張半徑在四個方向上的作用是均等的（也就是說，我們無法指定投影在水平方向上的放大，在垂直方向上縮小），唯一的辦法是用兩塊投影（每邊各一塊）來達到目的。基本上就是將單側(cè)投影中的技巧運用兩次，以如下所示：

box-shadow: 5px 0 5px -5px blue,-5px 0 5px -5px blue; 復制代碼

在瀏覽器中的效果如下：

5.3 模擬邊框

使用box-shadow屬性可以模擬border的效果，以如下所示：

<div class="box box6"></div> <div class="box box7"></div> 復制代碼.box{display: inline-block;width: 200px;height: 200px;background-color: #fb3; } .box6 {box-shadow: 0px 0px 0px 40px deeppink; }.box7 {box-shadow: 20px 20px 0px 20px blue,-20px -20px 0px 20px deeppink,0px 0px 0px 40px darkgreen; } 復制代碼

在瀏覽器中的效果如下：

我們可以看到利用box-shadow屬性模擬了border的效果，但是與border不同的是，使用box-shadow創(chuàng)建的邊框效果并不會影響元素的尺寸。我們指定了元素的尺寸為200*200，然后利用box-shadow模擬出border的效果，但是在瀏覽器中可以看到元素的尺寸依然是200*200，如下圖所示：

5.4 模擬靠近和遠離用戶的效果

利用box-shadow和動畫屬性，可以模擬靠近和遠離用戶的效果，以如下所示：

<div class="box popup"></div> 復制代碼.box{display: inline-block;width: 200px;height: 200px;background-color: #fb3; } .popup {transform: scale(1);box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);transition: box-shadow 0.5s, transform 0.5s; } .popup:hover {transform: scale(1.3);box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3);transition: box-shadow 0.5s, transform 0.5s; } 復制代碼

在瀏覽器中的效果如下：

5.5 模擬浮動效果

配合使用box-shadow和動畫屬性，可以模擬靠近和遠離用戶的效果，以如下所示：

<div class="box easy"></div> 復制代碼.easy {position: relative;transform: translateY(0);transition: transform 1s; } .easy:after {content: "";display: block;position: absolute;bottom: -30px;left: 50%;height: 8px;width: 100%;box-shadow: 0px 0px 20px 0px deeppink;border-radius: 50%;background-color: deeppink;transform: translate(-50%, 0);transition: transform 1s; } /*方塊向上移動*/ .easy:hover {transform: translateY(-40px);transition: transform 1s; } /*底部陰影形狀變化*/ .easy:hover:after {transform: translate(-50%, 40px) scale(0.75);transition: transform 1s; } 復制代碼

在瀏覽器中的效果如下所示：

5.6 模擬書頁效果

配合使用box-shadow和動畫屬性（旋轉(zhuǎn)）還可以實現(xiàn)下面的紙張效果：左下和右下方的陰影比中間的陰影要突出。

我們分步看看是如何創(chuàng)建上面的書頁效果的，有如下公共樣式：

有如下公共樣式：

<div class="box page"></div> 復制代碼.box{display: inline-block;width: 200px;height: 200px;background-color: #fb3; } 復制代碼

具體步驟如下：

（1）利用普通div和偽元素，創(chuàng)建陰影效果的驅(qū)殼，其中為了演示方便，添加了border屬性，最終會去掉border。

.page{position: relative; } .page:before, .page:after{position: absolute;content: "";bottom: 15px;left: 10px;width: 50%;top: 80%;border: 1px solid #cd0000; } .page:after {right: 10px;left: auto; } 復制代碼

在瀏覽器中的效果如下所示：

（2）新增偽元素的陰影效果，以及旋轉(zhuǎn)一定的角度，修改為如下代碼：

.page{position: relative; } .page:before, .page:after{ position: absolute;content: "";bottom: 15px;left: 10px;width: 50%;top: 80%;border: 1px solid #cd0000;box-shadow: 0 15px 10px #777;/*新增，陰影*/transform: rotate(-3deg);/*新增，旋轉(zhuǎn)*/ } .page:after {transform: rotate(3deg);/*新增，旋轉(zhuǎn)*/right: 10px;left: auto; } 復制代碼

在瀏覽器中的效果如下所示：

（3）使用z-index:-1,將偽元素隱藏掉，并且去掉為了說明效果的border屬性，最終的效果就是我們想要的書頁效果了。

.page{position: relative; } .page:before, .page:after{z-index: -1;/*新增*/position: absolute;content: "";bottom: 15px;left: 10px;width: 50%;top: 80%;/*border: 1px solid #cd0000;*/ box-shadow: 0 15px 10px #777;transform: rotate(-3deg); } .page:after {transform: rotate(3deg);right: 10px;left: auto; } 復制代碼

在瀏覽器中的效果如下所示：

6.寫在最后

box-shadow在css中的屬性相對來說比較少，但是剛開始接觸的時候比較抽象，特別是擴展半徑，我剛開始接觸的時候也是很難理解，但是根據(jù)網(wǎng)上一些博客作者的例子，然后自己動手寫例子，觀察效果，其實理解起來還是比較容易的。如果想更深入的了解box-shadow的MDN和W3C，還有一個比較好的在線查看box-shadow效果的css3gen。

感謝閱讀。

7.參考鏈接

box-shadow 屬性

---

? 遇見了，不妨關(guān)注下我的微信公眾號「前端Talkking」

總結(jié)

以上是生活随笔為你收集整理的【前端Talkking】CSS系列-css3之box-shadow介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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