摘要：基本上就是將單側(cè)投影中的技巧運(yùn)用兩次，以如下所示在瀏覽器中的效果如下模擬邊框使用屬性可以模擬的效果，以如下所示在瀏覽器中的效果如下我們可以看到利用屬性模擬了的效果，但是與不同的是，使用創(chuàng)建的邊框效果并不會(huì)影響元素的尺寸。

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

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

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

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

none：默認(rèn)值，設(shè)置后表示沒(méi)有陰影效果；

inset：該值后表示內(nèi)陰影，如果不設(shè)置，則默認(rèn)表示外陰影；

x-offset/y-offset：分別表示陰影在水平方向和垂直方向上的偏移量，支持正值和負(fù)值的設(shè)置，正值表示向右下方偏移，負(fù)值表示向左上方偏移；

blur-radius：陰影的模糊距離，只能設(shè)置0或者正值，值越大則表明陰影的邊緣越模糊；

spread-radius：陰影的擴(kuò)展半徑（可省略，默認(rèn)為0），支持正值和負(fù)值，正值表示陰影擴(kuò)展，負(fù)值表示陰影縮小。這個(gè)屬性在box-shadow中是相對(duì)比較難理解的一個(gè)屬性，在文章后面會(huì)詳細(xì)講到這個(gè)屬性的意義；

color：陰影的顏色，如果不設(shè)置，則會(huì)使用瀏覽器默認(rèn)的顏色 。

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

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

在瀏覽器中的效果如下：

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

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

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

那么繪制陰影的步驟會(huì)以下面的步驟進(jìn)行：

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

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

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

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

準(zhǔn)確的說(shuō)，我們將在頂部看到1px的陰影（4px-3px）、在左側(cè)看到2px(4px-2px)、在右側(cè)看到6px(4px+2px)、在底部看到7px(4px+3px)。在實(shí)踐中，投影看起來(lái)會(huì)比這些值稍小，因?yàn)橥队暗念伾谶吘壧幍倪^(guò)渡不是線(xiàn)性的。

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

x-offset用來(lái)聲明陰影在水平方向上的偏移量。如果為正數(shù)，則陰影在元素的右側(cè)；如果為負(fù)數(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)生了陰影。

y-offset用來(lái)聲明陰影在垂直方向上的偏移量。如果為正數(shù)，則陰影在元素的方側(cè)；如果為負(fù)數(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)生了陰影。

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

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，即不位移，不模糊，則沒(méi)有任何陰影的效果；第二幅圖中，設(shè)置blur-radius為20px，第三幅圖中社會(huì)組blur-radius為50px，可以看到，blur-radius值越大，則陰影越模糊。

這個(gè)屬性是box-sizing中最難理解的。我們先來(lái)看以下的例子：

box-shadow: 0px 0px 0px 20px deeppink;

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

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

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

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è)置陰影的顏色各不相同，則會(huì)產(chǎn)生相應(yīng)的陰影效果。

陰影默認(rèn)是外陰影，可以使用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)部生成的。

代碼如下：

box-shadow:  0 5px 4px -4px blue;

當(dāng)我們只想設(shè)置在元素的兩條邊上的陰影時(shí)，好像比較麻煩。因?yàn)閿U(kuò)張半徑在四個(gè)方向上的作用是均等的（也就是說(shuō)，我們無(wú)法指定投影在水平方向上的放大，在垂直方向上縮?。?，唯一的辦法是用兩塊投影（每邊各一塊）來(lái)達(dá)到目的。基本上就是將單側(cè)投影中的技巧運(yùn)用兩次，以如下所示：

 box-shadow:  5px 0 5px -5px blue,
                -5px 0 5px -5px blue;

在瀏覽器中的效果如下：

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

.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)建的邊框效果并不會(huì)影響元素的尺寸。我們指定了元素的尺寸為200*200，然后利用box-shadow模擬出border的效果，但是在瀏覽器中可以看到元素的尺寸依然是200*200，如下圖所示：

利用box-shadow和動(dòng)畫(huà)屬性，可以模擬靠近和遠(yuǎn)離用戶(hù)的效果，以如下所示：

.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;
}

在瀏覽器中的效果如下：

配合使用box-shadow和動(dòng)畫(huà)屬性，可以模擬靠近和遠(yuǎn)離用戶(hù)的效果，以如下所示：

.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;
}
/*方塊向上移動(dòng)*/
.easy:hover {
  transform: translateY(-40px);
  transition: transform 1s;
}
/*底部陰影形狀變化*/
.easy:hover:after {
  transform: translate(-50%, 40px) scale(0.75);
  transition: transform 1s;
}

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

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

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

有如下公共樣式：

.box{
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #fb3;
}

具體步驟如下：

（1）利用普通div和偽元素，創(chuàng)建陰影效果的驅(qū)殼，其中為了演示方便，添加了border屬性，最終會(huì)去掉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,將偽元素隱藏掉，并且去掉為了說(shuō)明效果的border屬性，最終的效果就是我們想要的書(shū)頁(yè)效果了。

.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;
}

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

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

感謝閱讀。

box-shadow 屬性

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