标签：
box-shadow属性包含6个参数值：阴影类型、X轴位移、Y轴位移、阴影大小、阴影扩展和阴影颜色。这6个参数值可以有选择地省略。
现在我们用一个img元素来举栗子
我们先来写最简单的box-shadow
只需要在box-shadow属性里设置X和Y的偏移量即可
img{ height:300px; -moz-box-shadow:5px 5px; -webkit-box-shadow:5px 5px; box-shadow:5px 5px; }
现在我们给阴影加上大小和颜色
第三个参数和第四个参数分别为阴影大小和颜色
img{ height:300px; -moz-box-shadow:2px 2px 10px #06C; -webkit-box-shadow:2px 2px 10px #06C; box-shadow:2px 2px 10px #06C; }
也可以不带偏移量，那样图片的四周都会有阴影（因为阴影有大小），从而带有一种轻微的渐变感。
img{ height:300px; -moz-box-shadow:0 0 10px #06C; -webkit-box-shadow:0 0 10px #06C; box-shadow:0 0 10px #06C; }
再加上10px的阴影扩展
img{ height:300px; -moz-box-shadow:0 0 10px 10px #06C; -webkit-box-shadow:0 0 10px 10px #06C; box-shadow:0 0 10px 10px #06C; }
也可以设置多组参数值定义多色阴影
顺序依次为左右上下
img{ height:300px; -moz-box-shadow:-10px 0 12px red, 10px 0 12px blue, 0 -10px 12px yellow, 0 10px 12px green; -webkit-box-shadow:-10px 0 12px red, 10px 0 12px blue, 0 -10px 12px yellow, 0 10px 12px green; box-shadow:-10px 0 12px red, 10px 0 12px blue, 0 -10px 12px yellow, 0 10px 12px green; }
结果如下
也可以用多参数来写渐变阴影
img{ height:300px; -moz-box-shadow:0 0 10px red, 2px 2px 10px 10px yellow, 4px 4px 12px 12px green; -webkit-box-shadow:0 0 10px red, 2px 2px 10px 10px yellow, 4px 4px 12px 12px green; box-shadow:0 0 10px red, 2px 2px 10px 10px yellow, 4px 4px 12px 12px green; }
结果
标签：
原文地址：http://www.cnblogs.com/zcynine/p/5380204.html
