今天在寫一個點亮燈泡的小專案的時候，用到了box-shadow屬性。感覺這個屬性挺有意思的，索性專門整理一下。

一. box-shadow的定義和語法

定義：box-shadow是css3新增的一個屬性。在W3School裡，定義box-shadow是向框新增一個或者多個陰影的屬性。 語法：box-shadow: h-shadow v-shadow blur spread color inset.  h-shadow: 陰影的水平位置 v-shadow：陰影的垂直位置 blur：陰影的模糊半徑 spread：陰影的半徑 color：陰影的顏色 inset：將外部陰影改成內部陰影【outset反過來】 根據box-shadow的定義，我們可以為一個框設定一個陰影，也可以設定多個陰影。

當我們需要設定多個陰影時，中間需要將每個陰影用逗號隔開。

舉個例子：

/*html程式碼*/ 
<div class="test"></div>

/*對應的css程式碼*/ 
.test{ 
  width: 100px; 
  height: 100px; 
  background: yellow; 
  margin: 100px auto; 
  border-radius: 50%; 
  box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5), -10px 10px 10px 10px rgba(255,255,255,0.5) 
} 
 

這裡我們用border-radius屬性設定了一個圓形，並且為這個圓形添加了一個淺黃色陰影和一個白色的陰影。

以第一個陰影：box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5)為例：

這段程式碼表示陰影的水平位置為右移10px；

垂直位置為下移10px；

第三個10px代表陰影的模糊程度blur，我們也將它設定成20px；

第四個10px是陰影半徑的意思；最後一個規定了陰影的顏色為rgba(255,255,0,0.5)。

也就是說，我們為class為test的div元素添加了一個偏離框，並且向右距離為10px、向下距離為10px、模糊半徑為10px、陰影半徑為10px的淺黃色的陰影。

根據上面的CSS程式碼，我們看一下同時設定了兩個陰影的效果：

為了更直白地觀察到上述陰影設定的效果，我們將第二個陰影刪除，只保留第一個陰影：

效果是不是還不錯？

二. box-shadow屬性值的詳細解析

根據前面的語法規則，box-shadow可以有六個值。接下來我們來聊一聊box-shadow屬性裡的每個值都怎麼用

1. h-shadow【必需】

這個值代表的是陰影在x軸上的陰影位置。可以是負值。

當它為正值的時候表示向右位移一定的距離【出現在元素的右邊】，負值表示向左位移【出現在元素的左邊】。這個距離的單位可以是px、em或者rem；

需要注意的是：h-shadow是必需的，不能省略！

box-shadow: 10px 0px 10px rgba(0,0,0,0.9) /*陰影出現在元素的右側*/

box-shadow: -10px 0px 10px rgba(0,0,0,0.9) /*陰影出現在元素的左側*/

2. v-shadow【必需】

這個值表示陰影在y軸上的位置。也可以是負值。

當值為負的時候表示向上偏移一定的距離【出現在元素的上方】；值為正的時候表示向下偏移一定的距離【出現的元素的下方】

box-shadow: 0px -20px 10px rgba(0,0,0,0.9)/*陰影出現在元素上方*/ 

box-shadow: 0px 20px 10px rgba(0,0,0,0.9)/*陰影出現在元素下方*/

3. blur【可選】

blur指的是陰影的模糊半徑。這個值使得陰影部分的過渡看起來更柔和。我們可以試一試不同blur值對陰影效果的影響：

box-shadow: 10px 10px 5px rgba(0,0,0,0.9) /*blur值為5px*/ 

box-shadow: 10px 10px 10px rgba(0,0,0,0.9)/*blur值為10px*/

box-shadow: 10px 10px 15px rgba(0,0,0,0.9)/*blur值為15px*/ 

將blur值為5px、10px、15px 的效果圖依次從左往右排列，可以看出來隨著模糊半徑數值的增大，陰影的模糊程度越高。

4. spread【可選】

spread表示的是陰影的半徑。我在網上看到有人對spread和blur的區別發出疑問，其實很簡單：blur用於描述模糊半徑，它的值決定了陰影的模糊程度；而spread是表示陰影所佔區域的大小，這是兩個不同的概念。

我們來試試其他屬性值相同的情況下，spread不同時陰影的表現：

box-shadow: 10px 10px 10px 5px rgba(0,0,0,0.9);/*陰影半徑為5px*/ 
box-shadow: 10px 10px 10px 15px rgba(0,0,0,0.9);/*陰影半徑為15px*/ 
box-shadow: 10px 10px 10px 25px rgba(0,0,0,0.9);/*陰影半徑為25px*/ 

將spread的值為5px、15px、25px的效果圖依次 從左向右排列，很明顯陰影在逐漸變大

5. color【可選】

陰影的顏色可以用任何顏色單位來表示。當我們沒有設定color值的時候，預設就是黑色。

box-shadow: 10px 10px 10px 5px rgba(0,0,0,0.9);/*黑色陰影，用rgba表示，透明度為0.9*/ 

box-shadow: 10px 10px 10px 5px rgb(255,0,0);/*紅色陰影，用rgb表示*/ 

box-shadow: 10px 10px 10px 5px #afe;/*淺藍色陰影，用十六進位制顏色表示法*/ 

box-shadow: 10px 10px 10px 5px blue;/*藍色陰影，用顏色單詞表示*/

6. inset 【可選】

預設情況下，我們設定的陰影都是外部陰影，而這個屬性值的作用是將外部陰影轉換成內部陰影。

box-shadow: 10px 10px 10px 5px blue; /*預設為外部陰影*/ 

box-shadow: 10px 10px 10px 5px blue inset;/*將外部陰影切換為內部陰影*/

7. 一些有趣的實踐

瞭解了box-shadow之後，我們可以用來做一些有趣的事情。比如給陰影新增動畫，對元素新增：hover偽元素，形成滑鼠懸浮在元素上時，陰影擴大的效果

.test{ 
  width: 100px; 
  height: 100px; 
  background: yellow; 
  margin: 100px auto; 
  border-radius: 50%; 
  box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.9); 
  transform: scale(1); 
  transition: box-shadow 0.6s, transform 0.5s; 
}

.test:hover{
	width: 100px;
	height: 100px;
	background: yellow;
	margin: 100px auto;
	border-radius: 50%;
	box-shadow: 0px 0px 50px 15px rgba(0,0,0,0.9);
	transition: box-shadow 0.5s;
}

怎麼樣，box-shadow屬性是不是挺有意思的？

好了，今天關於邊框陰影box-shadow 屬性的總結就寫到這裡了。鑑於剛剛做上面這個滑鼠懸浮效果的時候用到了CSS3的另外兩個新屬性transition和transform，我打算下次來寫一些這兩個屬性。

OVER！