想要更好的閱讀體驗，可以轉我的個人博客。
box-shadow 概述
先從整體來說說 box-shadow 屬性 。
box-shadow 支持定義多個陰影，他們應該使用逗號分割:
box-shadow: 3px 3px red, -1em 0 0.4em olive;
這裏定義了兩個陰影，分別是 3px 3px red、-1em 0 0.4em olive。
其中，每個陰影支持最多6個字段:
-
inset
可選的字段，默認不指定。
指定inset，陰影向內擴散，否則陰影向外擴散。
-
offset-x 和 offset-y
用來設置陰影偏移量，分爲 x方向 和 y方向。聲明的時候，x方向 在前，y方向 在後。
這個定義的順序是有講究的，CSS 的偏移採用的是我們平時定義座標軸的習慣，按照
(x,y)的順序，這個規則不僅僅適用於我們今天的主角box-shadow，而且基本上和"位移"、"偏移"有關的屬性都適用。如果兩者都是0，那麼陰影不做偏移，位於元素正後方。
-
blur-radius
一般情況下，陰影是純色的，沒有漸變區域。
但是如果設置了模糊半徑，就會創建一個漸變區域，向周圍的顏色過渡。
漸變半徑必須大於0。
-
spread-radius
擴散半徑是對原來的純色陰影的縮放。
默認取值爲0，代表陰影和物體一樣大，但因爲陰影在物體後面，所以你看不見。當然加上一層模糊半徑你就能看到了。
小於0的時候，陰影會縮小。這種情況下往往你也看不到，需要設置一層很厚的模糊半徑，然後慢慢調低擴散半徑你才能看出區別。
大於0的時候，陰影會擴大。
-
color
陰影的顏色，這就不用解釋了。
box-shadow 很簡單，但是對於新手來說，在面對模糊半徑和擴散半徑可能會有點困惑，接下來，我們將結合例子，更加深入探討這兩者的區別。
準備: 定義一個球
因爲方形的不太適合我們的講解，我們先定義一個圓形的球:
.ball {
height: 100px;
width: 100px;
border-radius: 50% 50%;
margin: 50px;
display: inline-block;
}
外加一些陰影:
.b1 {
box-shadow: 0px 0px 20px #888;
}
.b2 {
box-shadow: 0px 0px 20px 10px #888;
}
.b3 {
box-shadow: 0px 0px 0px 10px #888;
}
.b4 {
box-shadow: 0px 0px 20px -10px #888;
}
.b5 {
box-shadow: inset 0px 0px 20px #888;
}
.b6 {
box-shadow: inset 0px 0px 20px 10px #888;
}
.b7 {
box-shadow: inset 0px 0px 0px 10px #888;
}
.b8 {
box-shadow: inset 0px 0px 20px -10px #888;
}
只有模糊半徑
我們先定義一個沒有擴散半徑的球:
<!-- box-shadow: 0px 0px 20px #888 -->
<div class="ball b1"></div>
可以看到，球的周圍有一圈陰影，因爲我們沒有設置擴散半徑，所以我們看到的這層陰影應該是全部的模糊半徑。
我們還可以嘗試使用一下內陰影:
<!-- box-shadow: inset 0px 0px 20px #888 -->
<div class="ball b5"></div>
模糊半徑+擴散半徑(取正)
接下來我們嘗試使用在原來的基礎上添加一個擴散半徑:
<!-- box-shadow: 0px 0px 20px 10px #888 -->
<div class="ball b2"></div>
<!-- box-shadow: inset 0px 0px 20px 10px #888 -->
<div class="ball b6"></div>
第一感覺應該是陰影增厚了，再仔細看，我們會發現，增厚的部分的陰影都很濃，也就是說，我們增厚的部分是純色的陰影，而不是經過了模糊的漸變陰影，這就是所謂的擴散半徑。
只有擴散半徑
我們可以把模糊半徑去掉，看看差別:
<!-- box-shadow: 0px 0px 0px 10px #888 -->
<div class="ball b3"></div>
<!-- box-shadow: inset 0px 0px 0px 10px #888 -->
<div class="ball b7"></div>
看到了嗎？陰影是純色的，沒有漸變。
總結下來，模糊半徑就是漸變陰影半徑，而擴散半徑就是純色陰影半徑。並且，漸變陰影包在擴散陰影外面。
模糊半徑+擴散半徑(取負)
最後再看一個例子，是擴散半徑爲負數的時候:
<!-- box-shadow: 0px 0px 20px -10px #888 -->
<div class="ball b4"></div>
<!-- box-shadow: inset 0px 0px 20px -10px #888 -->
<div class="ball b8"></div>
擴散半徑爲負數，就是把裏面的那層純色的半徑減少了，也就是說，我們目前看到的是模糊半徑的一小部分。
大部分卡片UI的設計就是這種，你們可能很熟悉了，也是我個人覺得最好看的陰影。