box-shadow一共可以有6个属性值。其中,分别代表:
1.X轴相对偏移,
2.Y轴相对偏移,
3.模糊距离,
4.阴影的尺寸,
5.color颜色,
6.inset(内阴影),不写此参数默认为外阴影。
下面一个例子代表不加阴影尺寸。
代码为:
<span style="white-space:pre"> </span>box-shadow: 0px 0px 40px #000
由于X与Y设置的偏移为0所以完全就在原本DIV之下向四周散发。
下面例子设置X与Y的参数:
box-shadow: 20px 20px 40px #000 ;
设置了多少像素 那么就根据X与Y偏移多少,当然也可以为设置为负数。
设置阴影的尺寸,就是在颜色之前加上多少像素。比如:
<span style="white-space:pre"> </span>box-shadow: 20px 20px 40px 20px #000 ;
相对与没有添加尺寸之前,阴影面积加大。
最后是内阴影,只需要在颜色后面添加inset属性便可以了。
<span style="white-space:pre"> </span>box-shadow: 20px 20px 40px 20px #000 inset;
不止这样,我们还可以设置多个阴影,中间以","逗号隔开;
box-shadow: 20px 20px 40px 20px #000,20px 20px 40px 20px #09f;