通过使用css3中的shadow,可以给dom元素和文本加上阴影效果,分别是通过使用box-shadow和text-shadow来实现效果;
css3 box-shadow:
css3中box-shadow的基本用法是:box-shadow{ 2px 3px};其中2px是x轴偏移像素,3px是y轴偏移像素,shadow的颜色默认是黑色,看个例子:
style code:
div { width: 200px; height: 200px; padding: 15px; background-color: green; box-shadow: 5px 10px; }
想定义阴影颜色写在值后面,如box-shadow: 5px 10px red;
三个值的时候给阴影加上模糊效果:
style code:
div { width: 200px; height: 200px; padding: 15px; background-color: green; box-shadow: 5px 10px 2px red; }
当box-shadow定义四个值的时候,最后一个值是定义阴影面积扩展的,也就是向四面展开的宽度;
css3 text-shadow:
css3中text-shadow的基本用法是:text-shadow{ 2px 3px};其中2px是x轴偏移像素,3px是y轴偏移像素,shadow的颜色默认与字体颜色有关,看个例子:
额有点头晕,第二行偏左下方的就是阴影效果,style code:
#shadow { text-shadow: 5px 10px; color:red; }
当然也可以自定义阴影颜色:
style code:
#shadow { text-shadow: 5px 10px blue; color:red; }
三个值的时候是给阴影加上模糊效果:
style code:
#shadow { text-shadow: 5px 10px 2px blue; color:red; }
也可以加上多个阴影效果:
style code:
#shadow { text-shadow: 0 0 3px red, 0 0 5px blue; }
注意这里水平竖直方向的值给的是0,这样写阴影就从字体本身开始模糊扩散,并没有位移;
Text-shadow兼容:
box-shadow兼容: