CSS3 属性

1、box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;
复制代码

.box_shadow { 
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*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*/ 
}
复制代码

理解参数含义

• 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) 改成内部阴影。该参数为可选参数。