CSS3 box-shadow 属性讲解:
1
|
box-shadow: h-shadow v-shadow blur spread color
inset
;
|
h-shadow:阴影水平偏移的距离,大于0表示向右偏移,小于0表示向左偏移,等于0等于没有水平偏移。该参数为必需参数。
v-shadow:阴影垂直偏移的距离,大于0表示向下偏移,小于0表示向上偏移,等于0表示没有垂直偏移。该参数为必需参数。
blur:阴影的模糊距离,该参数为可选参数。
spread:阴影的尺寸,该参数为可选参数。0px代表阴影和当前的实体一样大,大于0则表示大于实体的尺寸。
color:阴影的颜色,该参数为可选参数。参数的形式有:black(英文)、#000000(16进制)、RGB:(0,0,0)(10进制)等。
inset:将外部阴影 (outset) 改为内部阴影。该参数为可选参数。
也有这样表述的:
1
|
box-shadow:
inset
x-offset y-offset blur-radius spread-radius color
|
对象选择器 box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色
不管对于哪种表述,怎么使用才是我们关注的焦点,这里别逗了好么做了下面的详细实例。
例1:水平向右偏移5像素
1
2
3
4
5
6
7
8
9
|
.box_shadow{
width
:
300px
;
height
:
120px
;
background
:
#AAA
;
box-shadow:
5px
0px
0px
#333
;
text-align
:
center
;
font
:
900
55px
/
120px
"微软雅黑"
,
Helvetica
,
sans-serif
;
color
:
#FFF
;
}
|
效果:
例2:水平向左偏移5像素
1
2
3
4
5
6
7
8
9
|
.box_shadow{
width
:
300px
;
height
:
120px
;
background
:
#AAA
;
box-shadow:
-5px
0px
0px
#333
;
text-align
:
center
;
font
:
900
55px
/
120px
"微软雅黑"
,
Helvetica
,
sans-serif
;
color
:
#FFF
;
}
|
效果:
例3:垂直向下偏移5像素
1
2
3
4
5
6
7
8
9
|
.box_shadow{
width
:
300px
;
height
:
120px
;
background
:
#AAA
;
box-shadow:
0px
5px
0px
#333
;
text-align
:
center
;
font
:
900
55px
/
120px
"微软雅黑"
,
Helvetica
,
sans-serif
;
color
:
#FFF
;
}
|
效果:
例4:垂直向上偏移5像素
1
2
3
4
5
6
7
8
9
|
.box_shadow{
width
:
300px
;
height
:
120px
;
background
:
#AAA
;
box-shadow:
0px
-5px
0px
#333
;
text-align
:
center
;
font
:
900
55px
/
120px
"微软雅黑"
,
Helvetica
,
sans-serif
;
color
:
#FFF
;
}
|
效果:
例5:向右下偏移5像素,阴影模糊半径设置为5像素
1
2
3
4
5
6
7
8
9
|
.box_shadow{
width
:
300px
;
height
:
120px
;
background
:
#AAA
;
box-shadow:
5px
5px
5px
#333
;
text-align
:
center
;
font
:
900
55px
/
120px
"微软雅黑"
,
Helvetica
,
sans-serif
;
color
:
#FFF
;
}
|
效果:
例6:向右下偏移5像素,阴影模糊半径设置为5像素,设置阴影的尺寸为10像素
1
2
3
4
5
6
7
8
9
|
.box_shadow{
width
:
300px
;
height
:
120px
;
background
:
#AAA
;
box-shadow:
5px
5px
5px
10px
#333
;
text-align
:
center
;
font
:
900
55px
/
120px
"微软雅黑"
,
Helvetica
,
sans-serif
;
color
:
#FFF
;
}
|
效果:
例7:向右下偏移5像素,阴影模糊半径设置为5像素,设置阴影的尺寸为10像素,设置阴影的颜色为红色
1
2
3
4
5
6
7
8
9
|
.box_shadow{
width
:
300px
;
height
:
120px
;
background
:
#AAA
;
box-shadow:
5px
5px
5px
10px
#F00
;
text-align
:
center
;
font
:
900
55px
/
120px
"微软雅黑"
,
Helvetica
,
sans-serif
;
color
:
#FFF
;
}
|
效果:
例8:设置内部阴影
1
2
3
4
5
6
7
8
9
|
.box_shadow{
width
:
300px
;
height
:
120px
;
background
:
#AAA
;
box-shadow:
0px
0px
5px
5px
#999
inset
;
text-align
:
center
;
font
:
900
55px
/
120px
"微软雅黑"
,
Helvetica
,
sans-serif
;
color
:
#FFF
;
}
|
效果:
对于不同的浏览器,兼容问题的解决办法:
1
2
3
4
5
6
7
|
.box_shadow{
background-color
:
#eee
;
filter: progid:DXImageTransform.Microsoft.Shadow(color=
'#969696'
, Direction=
135
, Strength=
5
);
/*for ie6,7,8*/
-moz-box-shadow:
2px
2px
5px
#969696
;
/*firefox*/
-webkit-box-shadow:
2px
2px
5px
#969696
;
/*webkit*/
box-shadow:
2px
2px
5px
#969696
;
/*opera或ie9*/
}
|