box-shadow用來設置陰影，基本的設置為
box-shadow: 水平偏移量 垂直偏移量 模糊距離 陰影大小 顏色 向內/向外（默認向外）
- 對圖形進行變形的同時，陰影也會做相應的變形
- 除顏色外，其它值都取0，陰影與圖形完全重合且不可見，可以通過對x/y偏移量來看看
首先設置一個圓形div
<div style="width: 100px; height: 100px; border-radius: 50px; border: 2px solid black;></div>
下面對各個參數分別做說明
1. 設置水平偏移量
正值向右 box-shadow: 100px 0px 0px 0px red
負值向左 box-shadow: -100px 0px 0px 0px red
2. 垂直偏移量與水平偏移效果類似
3. 模糊距離
- 原圖形大小為（x，y）設置模糊距離為blur，則陰影變化的起始點（或終點）為從圖形邊緣到blur距離位置
- 顏色從水平（垂直方向）的中點向外變化透明度，最外層為完全透明
- 不可以為負
box-shadow: -100px 0px 50px 0px red
4. 陰影大小
- 對陰影進行擴展（正值），收縮（負值）
- 設置陰影大小為blur，從原圖形的邊緣再擴展（收縮）blur距離
正值擴展 box-shadow: -100px 0px 0px 20px red
負值收縮 box-shadow: -100px 0px 0px -20px red
5. 顏色
設置陰影的顏色，上面我都是設置為red
6. 向內/向外
- 初始狀態陰影的邊框和圖形的邊框一致
- 定義陰影從邊框位置向內還是向外拉出
- 如果不設置，表示向外，那么陰影部分是從圖形邊框向外到陰影邊框
- 如果設置inset，表示向內，那么陰影部分是從圖形邊框向內到陰影邊框。不占order的區域
水平偏移量為50px box-shadow: 5
模糊距離50px box-shadow:
陰影大小 box-shadow:
