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