box-shadow詳解

今天課堂上有學生問到box-shadow這個屬性，那麼下面咱們就來詳細的解說下這個屬性它的用法，box-shadow是css3中的一個屬性，它能夠向框添加一個或多個陰影。

首先咱們來看它的語法：

box-shadow屬性接收一個由5個參數組成的值，每一個值的意思以下：

h-shadow: 水平陰影的位置。

v-shadow:垂直陰影的位置。

blur：模糊距離

spread：陰影的尺寸

color：陰影的顏色

接下來咱們經過幾個實例來加深對這些值的理解：

1.h-shadow：這個值指定了陰影的水平偏移量。即在x軸上陰影的位置。若是是正數陰影會出如今元素的右邊，若是是負值陰影出如今元素的左邊。

以下圖所示：

正值

負值

2.v-shadow：這個值指定了陰影的垂直偏移量。即在y軸上陰影的位置。若是是正值陰影會出如今元素的上邊，若是是負值陰影會出如今元素的下邊。

以下圖所示：

負值

正值

三、blur：這個值表明陰影的模糊半徑，若是是「0」意味着陰影是徹底實心的，沒有任何模糊效果。該值越大，實心度越小，陰影越朦朧和模糊，該值不支持負數。

值爲0：

值不爲0：

4：spread這個值表明着陰影的尺寸。這個值能夠被看做是從元素到陰影的距離。若是正值會在元素的四個方向延伸陰影。負值會使陰影變得比元素自己尺寸還要小。默認值「0」會讓陰影變得得和元素的大小同樣。

 

 

5：color：這個值是指定陰影的顏色

經過以上的demo，我相信如今你們對box-shadow這個屬性的用法也理解得不錯了，更多的web前端知識詳解，請你們持續關注。。。。。。。。。。。。

（php開發,web前端，ui設計，vr開發專業培訓機構，v客學院版權全部，轉載請註明出路，謝謝！！！）