CSS3 box-shadow阴影属性使用

语法： box-shadow: [投影方式] 水平偏移量 垂直偏移量 阴影模糊半径 阴影扩展半径 阴影颜色

定义： 给元素添加周边的阴影效果

参数	默认值	定义
阴影类型	outset（可选值：inset）	选择投影方式为 外投影还是内投影
水平偏移量	正：阴影在元素的右边 负：阴影在元素的左边	阴影水平偏移量
垂直偏移量	正：阴影在元素的底部 负：阴影在元素的顶部	阴影垂直偏移量
阴影扩展半径	正：阴影扩展扩大 负：阴影扩展缩小	阴影扩展
阴影模糊半径	正：只能为正值 值越大边缘越模糊 0：不具有模糊效果

兼容性写法：

.shadow{ 
    //example:[投影方式] 水平偏移量 垂直偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 

    //firefox1.0- 
    -moz-box-shadow: example; 

    //Safariand google chrome 10.0- 
    -webkit-box-shadow: example; 

    //Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 
    box-shadow: example; 
}

 

实例：

//1.X偏移量 
.shadow{ 
    -moz-box-shadow: -1px 0px 0px #333; 
    -webkit-box-shadow: 1px 0px 0px #333; 
    box-shadow: 1px 0px 0px #333; 
} 
//当水平偏移量为负值的时候 阴影到元素的最左边 以此类推 为正值的时候 在元素的最右边

 

2.Y偏移量 
.shadow{ 
    -moz-box-shadow: 0px -1px 0px #333; 
    -webkit-box-shadow: 0px -1px 0px #333; 
    box-shadow: 0px -1px 0px #333;
} 
//垂直偏移量为负值的时候 在元素的顶部 反之 为正值的时候在元素的底部

 

3.模糊半径 
.shadow{ 
    -moz-box-shadow:0px 0px 6px #333333; 
    -webkit-box-shadow:0px 0px 6px #333333; 
    box-shadow:0px 0px 6px #333333; 
} 
//模糊半径只有正值 值越大 扩散的范围越模糊

4.阴影叠加 
.shadow{ 
    -moz-box-shadow:  
        inset 0 1px 1px rgba(255,255,255,.5),  
        inset 0 -1px 0 rgba(0,0,0,.15),  
        0 1px 3px rgba(0,0,0,.15); 

    -webkit-box-shadow:  
        inset 0 1px 1px rgba(255,255,255,.5),  
        inset 0 -1px 0 rgba(0,0,0,.15),  
        0 1px 3px rgba(0,0,0,.15); 

    box-shadow:  
        inset 0 1px 1px rgba(255,255,255,.5),  
        inset 0 -1px 0 rgba(0,0,0,.15),  
        0 1px 3px rgba(0,0,0,.15); 
}