今天課堂上有學生問到box-shadow這個屬性，那么下面我們就來詳細的解說下這個屬性它的用法，box-shadow是css3中的一個屬性，它可以向框添加一個或多個陰影。
首先我們來看它的語法：
box-shadow屬性接收一個由5個參數組成的值，每個值的意思如下：
h-shadow: 水平陰影的位置。
v-shadow:垂直陰影的位置。
blur：模糊距離
spread：陰影的尺寸
color：陰影的顏色
接下來我們通過幾個實例來加深對這些值的理解：
1.h-shadow：這個值指定了陰影的水平偏移量。即在x軸上陰影的位置。如果是正數陰影會出現在元素的右邊，如果是負值陰影出現在元素的左邊。
如下圖所示：
正值
負值
2.v-shadow：這個值指定了陰影的垂直偏移量。即在y軸上陰影的位置。如果是正值陰影會出現在元素的上邊，如果是負值陰影會出現在元素的下邊。
如下圖所示：
負值
正值
3、blur：這個值代表陰影的模糊半徑，如果是“0”意味着陰影是完全實心的，沒有任何模糊效果。該值越大，實心度越小，陰影越朦朧和模糊，該值不支持負數。
值為0：
值不為0：
4：spread這個值代表着陰影的尺寸。這個值可以被看作是從元素到陰影的距離。如果正值會在元素的四個方向延伸陰影。負值會使陰影變得比元素本身尺寸還要小。默認值“0”會讓陰影變得得和元素的大小一樣。
5：color：這個值是指定陰影的顏色
通過以上的demo，我相信現在大家對box-shadow這個屬性的用法也理解得不錯了，更多的web前端知識詳解，請大家持續關注。。。。。。。。。。。。
（php開發,web前端，ui設計，vr開發專業培訓機構，v客學院版權所有，轉載請注明出路，謝謝！！！）