【前端Talkking】CSS系列-css3之box-shadow介绍
1.寫在前面
在CSS3中，可以使用box-shadow屬性來創建陰影效果來給二維平面增加深度效果，這個屬性在前端開發中使用的非常多，例如segmentfault的首頁就是使用了box-shadow屬性來增加深度效果，今天我們就一起來看看這個屬性。
2.box-shadow的基本語法
box-shadow: [x-offset y-offset blur-radius spread-radius color,inset ]+
其中，+在正則表達式中表示一次或者多次的意思，也就是說box-shadow可以支持同時設置多個陰影。
首先我們來看下基本參數的含義：
- none：默認值，設置后表示沒有陰影效果；
- inset：該值后表示內陰影，如果不設置，則默認表示外陰影；
- x-offset/y-offset：分別表示陰影在水平方向和垂直方向上的偏移量，支持正值和負值的設置，正值表示向右下方偏移，負值表示向左上方偏移；
- blur-radius：陰影的模糊距離，只能設置0或者正值，值越大則表明陰影的邊緣越模糊；
- spread-radius：陰影的擴展半徑（可省略，默認為0），支持正值和負值，正值表示陰影擴展，負值表示陰影縮小。這個屬性在box-shadow中是相對比較難理解的一個屬性，在文章后面會詳細講到這個屬性的意義；
- color：陰影的顏色，如果不設置，則會使用瀏覽器默認的顏色 。
在對box-shadow的每一個參數進行說明后，可能大家還是一點概念沒有，不知道該怎么用。那么首先讓我們來看一個大家經常使用box-shadow的方法：指定三個長度值和一個顏色值來實現陰影效果，如下所示：
box-shadow: 2px 3px 4px rgba(0,0,0,.5); 復制代碼在瀏覽器中的效果如下：
最終，我們實現實現了左側和底部邊框陰影的效果，但是大家有沒有想過box-shadow繪制陰影的原理是什么嗎？繪制原理請看下一節。
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的模糊處理，本質上表示在陰影邊緣發生陰影色和純透明色之間的顏色過渡長度近似于模糊半徑的兩倍，如下圖3所示；
（4）模糊后矩形與原始元素的交集部分會被切除掉，因此，最后看到的陰影效果如下圖4所示，也就是我們最終看到的陰影效果。
準確的說，我們將在頂部看到1px的陰影（4px-3px）、在左側看到2px(4px-2px)、在右側看到6px(4px+2px)、在底部看到7px(4px+3px)。在實踐中，投影看起來會比這些值稍小，因為投影的顏色在邊緣處的過渡不是線性的。
說完了box-shadow的繪制原理，下面將結合例子對box-shadow的每一個屬性做詳細的說明
4.box-shadow屬性詳解
4.1 x-offset
x-offset用來聲明陰影在水平方向上的偏移量。如果為正數，則陰影在元素的右側；如果為負數，則陰影在元素的左側。如下代碼所示：
box-shadow: 10px 0 5px 0 rgba(0,0,0,.5); 復制代碼box-shadow: -10px 0 5px 0 rgba(0,0,0,.5); 復制代碼在瀏覽器中的效果如下所示：
第一幅圖中，設置x-offset為10px，在右側產生了陰影；第二幅圖中，設置x-offset為-10px，則在左側產生了陰影。
4.2 y-offset
y-offset用來聲明陰影在垂直方向上的偏移量。如果為正數，則陰影在元素的方側；如果為負數，則陰影在元素的上方。如下代碼所示：
box-shadow: 0 10px 5px 0 rgba(0,0,0,.5); 復制代碼box-shadow: 0 -10px 5px 0 rgba(0,0,0,.5); 復制代碼在瀏覽器中的效果如下所示：
第一幅圖中，設置y-offset為10px，在底部產生了陰影；第二幅圖中，設置y-offset為-10px，則在頂部產生了陰影。
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); 復制代碼第一幅圖中，設置x-offset、y-offset、blur-radius為0px，即不位移，不模糊，則沒有任何陰影的效果；第二幅圖中，設置blur-radius為20px，第三幅圖中社會組blur-radius為50px，可以看到，blur-radius值越大，則陰影越模糊。
4.4 spread-radius
這個屬性是box-sizing中最難理解的。我們先來看以下的例子：
box-shadow: 0px 0px 0px 20px deeppink; 復制代碼可以看到20px的邊框效果：
然后，我們動態更改blur-radius，可以看到模糊的是邊框部分，也是顏色為deeppink的邊框。
其實，我們可以將spread-radius理解成元素blur的“margin”，為正的時候漸變向外擴張、為負的時候漸變向內收縮。
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; } 復制代碼在瀏覽器中的效果如下所示：
三幅圖中，設置陰影的顏色各不相同，則會產生相應的陰影效果。
4.6 inset
陰影默認是外陰影，可以使用inset關鍵字指定陰影為外陰影。如下代碼所示：
.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; } 復制代碼在瀏覽器中的效果如下所示：
三幅圖中，設置陰影為內陰影，最終陰影是在元素內部生成的。
5.box-shadow屬性之案例
5.1 單側投影
代碼如下：
box-shadow: 0 5px 4px -4px blue; 復制代碼這個例子比較好理解，在瀏覽器中的效果如下：
5.2 雙側投影
當我們只想設置在元素的兩條邊上的陰影時，好像比較麻煩。因為擴張半徑在四個方向上的作用是均等的（也就是說，我們無法指定投影在水平方向上的放大，在垂直方向上縮小），唯一的辦法是用兩塊投影（每邊各一塊）來達到目的。基本上就是將單側投影中的技巧運用兩次，以如下所示：
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創建的邊框效果并不會影響元素的尺寸。我們指定了元素的尺寸為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和動畫屬性（旋轉）還可以實現下面的紙張效果：左下和右下方的陰影比中間的陰影要突出。
我們分步看看是如何創建上面的書頁效果的，有如下公共樣式：
有如下公共樣式：
<div class="box page"></div> 復制代碼.box{display: inline-block;width: 200px;height: 200px;background-color: #fb3; } 復制代碼具體步驟如下：
（1）利用普通div和偽元素，創建陰影效果的驅殼，其中為了演示方便，添加了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）新增偽元素的陰影效果，以及旋轉一定的角度，修改為如下代碼：
.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);/*新增，旋轉*/ } .page:after {transform: rotate(3deg);/*新增，旋轉*/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中的屬性相對來說比較少，但是剛開始接觸的時候比較抽象，特別是擴展半徑，我剛開始接觸的時候也是很難理解，但是根據網上一些博客作者的例子，然后自己動手寫例子，觀察效果，其實理解起來還是比較容易的。如果想更深入的了解box-shadow的MDN和W3C，還有一個比較好的在線查看box-shadow效果的css3gen。
感謝閱讀。
7.參考鏈接
box-shadow 屬性
? 遇見了，不妨關注下我的微信公眾號「前端Talkking」
總結
以上是生活随笔為你收集整理的【前端Talkking】CSS系列-css3之box-shadow介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自定义Exchange2003未送达报告
- 下一篇： 表锁定模拟语句