box-shadow是CSS3新增的一个属性,可以给元素添加阴影效果,其默认值为none。下面将从多个方面对box-shadow默认值做详细的阐述。
一、box-shadow属性的语法
box-shadow属性的语法如下:
box-shadow: h-shadow v-shadow blur spread color inset;
其中,h-shadow和v-shadow参数是必须的,指定水平和垂直方向的阴影偏移量;blur是可选的,指定阴影的模糊半径;spread也是可选的,指定阴影的扩展半径;color是阴影的颜色;inset是可选的,指定阴影是内阴影(在边框内部)还是外阴影(在边框外部),默认是外阴影。
二、添加多重阴影
box-shadow属性可以添加多重阴影。代码示例:
.shadow { box-shadow: 0px 0px 10px #000, 0px 0px 20px #000, 0px 0px 30px #000; }
上面的代码给元素添加了3层阴影,分别为10px、20px、30px的模糊半径。
三、应用在特定元素上
box-shadow默认值可以应用在所有的元素上,例如:
div { box-shadow: 0px 0px 10px #000; } ul { box-shadow: 0px 0px 10px #000; }
上面的代码将给所有的div和ul元素添加相同的阴影效果。
四、应用在特定状态的元素上
box-shadow默认值可以应用在特定状态下的元素上,例如:
.button:hover { box-shadow: 0px 0px 10px #000; }
上面的代码将给所有鼠标悬停在.button元素上时添加阴影效果。
五、应用颜色透明的阴影
使用rgba()函数可以创建颜色透明的阴影。代码示例:
.shadow { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); }
上面的代码给元素添加了一个模糊半径为10px,颜色为黑色、透明度为0.5的阴影。
六、给阴影添加圆角
使用border-radius属性可以给阴影添加圆角效果。代码示例:
.shadow { box-shadow: 0px 0px 10px #000; border-radius: 10px; }
上面的代码给元素添加了一个模糊半径为10px的黑色阴影,并给元素本身添加了圆角效果。