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) 改成內部陰影。該參數爲可選參數。