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客学院版权全部，转载请注明出路，谢谢！！！）