3.27 效果 - 區塊陰影

box-shadow 針對區塊來建立陰影。

預設值是 none：

box-shadow: none;

語法：

box-shadow: 水平位移 垂直位移 模糊 擴散 顏色 inset;

範例 1：單一顏色

單一顏色，以下樣式為例，black 陰影，且向右移動 5px ，向下移動 10px。

div.test{
  background-color: red;
  color: white;
  
  box-shadow: 5px 10px black;
}

範例 2：模糊

div.test{
  background-color: red;
  color: white;
  width: 200px;
  
  /* 水平 垂直 模糊 顏色 */
  box-shadow: 5px 5px 5px black;
}

例：

範例 3：擴散

div.test{
  background-color: red;
  color: white;
  width: 200px;
  
  /* 水平 垂直 模糊 擴散 顏色 */
  box-shadow: 5px 5px 0px 5px black;
}

範例 4：建立多個陰影

相同語法，只是以逗號做分隔：

div.test{
  background-color: red;
  color: white;
  width: 200px;
  
  box-shadow: 5px 5px black, 10px 10px green;
}

範例 5：建立內陰影

最後面加上 inset 即可：

box-shadow: 5px 5px 0px 0px black inset;

常搭配 :active ，滑鼠左鍵按壓下去，不放開的狀態。例：