html盒子阴影的语法 css3 盒阴影box-shadow

1.描述：

box-shadow可以设置一个或多个下拉阴影的框，此属性使用于盒模型不是用来设置文字阴影，设置文字阴影可以使用text-shadow

2.语法：

box-shadow：h-shadow v-shadow blur spread color inset

◆h-shadow：(必)定义阴影的水平位移，可负(正数：阴影出现在边框的右边，负数：阴影出现在边框的左边 0：不显示)

◆v-shadow：(必)定义阴影的垂直位移，可负(正数：阴影出现在边框的下边，负数：阴影出现在边框的上边 0：不显示)

◆blur：(可选)模糊距离(0：不显示阴影，负数：不显示阴影 正数：数值越大阴影越模糊)

◆spread：(可选)阴影的大小

◆color：(可选)阴影的颜色

◆inset：(可选)从外层的阴影(开始时)改变阴影内侧阴影(设置该值：阴影出现在边框的里边，取消该值：阴影出现在边框的外边)

总结：h-shadow v-shadow 属性决定的是阴影的偏移量，blur spread属性决定阴影的模糊程度与大小

color属性决定的是阴影的颜色

3.例子

1】设置h-shadow v-shadow color

.box-shadow{

width:200px;

height:100px;

background:#FF8C69;

margin-left:100px;

box-shadow:10px 10px #888;//设置h-shadow v-shadow color

}

2】在上面例子基础上添加blur属性

box-shadow:10px 10px 5px #888;//添加blur属性为5px

由此图可见，阴影部分变模糊了

改变blur的值为30px

box-shadow:10px 10px 30px #888;//改变blur为30px

结论：blur的值越大，阴影越模糊

3】添加spread属性

box-shadow:10px 10px 5px 20px #888;//设置spread值为20px

4】h-shadow v-shadow 设置为0

box-shadow:0px 0px 10px #888;

h-shadow与v-shadow设置为0，阴影在元素的正下方，正好被块元素遮挡，设置blur，spread属性就会让阴影从块元素向四方扩散

框和阴影的关系：只要存在框，它就存在阴影，默认情况下，阴影与框宽高一致，阴影重叠在框的下面不可见

5】在"4】"的基础上设置spread为20px

box-shadow:0px 0px 10px 20px #888;

6】设置四个边框不同颜色的阴影

.box-shadow{

margin-top:50px;

width:200px;

height:100px;

background:#FF8C69;

margin-left:100px;

box-shadow:-10px 0px 10px #DDA0DD,//左边阴影

0px -10px 10px #E6E6FA,//上边阴影

10px 0px 10px #CDCDB4,//右边阴影

0px 10px 10px #CAFF70;//下边阴影

}

7】设置半透明阴影

透明之前阴影

.box-shadow{

margin-top:50px;

width:200px;

height:100px;

background:#FF8C69;

margin-left:100px;

box-shadow:50px 50px rgba(221, 160, 221,.4);

}

8】设置一个方向山多个阴影

box-shadow:50px 50px rgba(221, 160, 221,.4),120px 120px rgba(192, 255, 62,.4);