影子在現實生活中可以是一個物體的副本，在 CSS 中也是這樣的，相當於複製了那個元素（並不是真正的元素，對頁面佈局沒有任何影響），可以從下面的程式碼中看出來。

.container {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 50px auto; /*水平居中這樣在頁面上方便檢視陰影*/
  box-shadow: 0 0 0 0 blue;
}

這個時候實際上已經生成了一個寬度 100px，高度 100px 藍色的正方體，現在我們通過給它加一些偏移量讓其顯示出來。

令 box-shadow: 200px 200px 0 0 blue;

講到這，第一個和第二個引數也講完了，第一個引數是 x 方向的偏移量（正值表示向右偏移負值表示向左偏移），第二個引數是 y 方向的偏移量（正值表示向下偏移，負值表示向上偏移）。

接下來，我們再來看一下第四個引數，先不說是什麼，先上程式碼看效果。

.container {
    ...
  box-shadow: 0 0 0 10px blue;
}

我們會發現藍色正方體比紅色的正方體大一些，大出來的寬度其實就是我們設定的 10px，第四個引數就是指的在原有副本的基礎上擴充套件多少。第四個引數稱為擴充套件半徑，大於 0 的值會在原有副本的基礎上向外擴充套件(也就是會變大)，小於 0 的值會在原有副本的基礎上向內擴充套件（也就是會變小）。

接下來我們再來看第三個引數，還是上程式碼看效果：

.container {
  ...
  box-shadow: 0 0 10px 20px blue;
}

可以看到隨著第三個引數的增大，陰影模糊的區域是以陰影的外邊框處為中心內外同時變得模糊，模糊的半徑就是第三個引數設定的值。

MDN 解釋：

這是第三個 值。值越大，模糊面積越大，陰影就越大越淡。 不能為負值。預設為0，此時陰影邊緣銳利。
對於長而直的陰影邊緣，它會建立一個過渡顏色用於模糊 以陰影邊緣為中心、模糊半徑為半徑的局域，過渡顏色的範圍在完整的陰影顏色到它最外面的終點的透明之間。

第五個引數是顏色，沒什麼太多好說的，第六個引數可以選擇設定為 inset，這個是可選的，預設是不設定這個值的。

還是先來看一下 MDN 上的解釋：

inset
如果沒有指定inset，預設陰影在邊框外，即陰影向外擴散。
使用 inset 關鍵字會使得陰影落在盒子內部，這樣看起來就像是內容被壓低了。 此時陰影會在邊框之內 (即使是透明邊框）、背景之上、內容之下。

接下來還是通過動態調整程式碼來說明一下：

通過上圖可以看出，當調整擴充套件半徑時，隨著擴充套件半徑的增大，原物體(紅色的正方體)是逐漸減小的，擴充套件的方向是向內。

當調整模糊半徑時，是以原物體邊框為中心向兩側模糊，模糊半徑是第三個引數設定的值。

現在有個問題，怎樣不使用 border 畫出一個 1px 的邊框呢？通過 box-shadow 就可以實現。

.container {
  box-shadow: 0 0 0 1px blue;
}

經常說的，一個元素實現各種神奇的樣式一般都是用 box-shadow 做的。

看看這個 叮噹貓 吧。

box-shadow 的作用

• 營造立體感

  例如可以將某個按鈕就像是懸浮一樣，例如就像是我部落格園主頁上的 知乎 按鈕。

  

• 充當沒有寬度的邊框

  注意使用 border 設定邊框在佈局時是需要考慮邊框的寬度的，但是使用 shadow-box 設定的邊框是不需要的，因為陰影本來就是虛擬出來的，並不是一個具體的元素，佈局時根本不會考慮它。

• 特殊效果

  例如只利用一個元素來通過很多次 box-shadow 的方式，做出很多種奇妙的圖形，對於一些比較難畫的地方可以利用一個一個的點拼接起來，例如叮噹貓的鬍鬚。

  但是如果利用特別多的 shadow-box，效能其實並不是很好。

完，如有不恰當之處，歡迎指正