CSS3实战之box-shadow篇

 

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;                       
}

结果