css3中的box-shadow(阴影)使用说明和兼容性问题

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*/  }

文章标签： css3 box-shadow

本文链接： http://www.kaicz.com/web/135.html