# DAY15 - CSS3 陰影效果 - box-shadow

### 把玩陰影效果吧!

- HTML 建立 box

<div class="box"></div>

- CSS

設定 box 長寬、背景顏色。

  width: 140px;
  height: 140px;
  background-color: blanchedalmond;


---

### 加入 box-shadow 語法:

- **box-shadow** 語法，實現它。
主要有**4個必要屬性**。
- `x軸` , `y軸` , `陰影柔焦效果` , `陰影 color`

.box {
  width: 140px;
  height: 140px;
  background-color: blanchedalmond;
  box-shadow: 10px 8px 20px #004466;
}


- 陰影顏色正確套用了 `hex color: #004466`;

###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / CSS3`