css3 box-shadow屬性 鼠標移動添加陰影效果


text-shadow是給文本添加陰影效果,box-shadow是給元素塊添加周邊陰影效果。

基本語法:{box-shadow:[inset] x-offset  y-offset  blur-radius  spread-radius  color}

對象選擇器:{box-shadow:[投影方式] X軸偏移量  Y軸偏移量  陰影模糊半徑  陰影擴展半徑  陰影顏色}

 

box-shadow屬性的參數設置取值:

陰影類型:此參數可選。如不設值,默認投影方式是外陰影;如取其唯一值“inset”,其投影為內陰影;

X-offset:陰影水平偏移量,其值可以是正負值。如果值為正值,則陰影在對象的右邊,其值為負值時,陰影在對象的左邊;

Y-offset:陰影垂直偏移量,其值也可以是正負值。如果為正值,陰影在對象的底部,其值為負值時,陰影在對象的頂部;

陰影模糊半徑:此參數可選,,但其值只能是為正值,如果其值為0時,表示陰影不具有模糊效果,其值越大陰影的邊緣就越模糊;

陰影擴展半徑:此參數可選,其值可以是正負值,如果值為正,則整個陰影都延展擴大,反之值為負值時,則縮小;

陰影顏色:此參數可選。如不設定顏色,瀏覽器會取默認色,但各瀏覽器默認取色不一致,特別是在webkit內核下的safari和chrome瀏覽器下表現為透明色,在Firefox/Opera下表現為黑色。

 

兼容性:

為了兼容各主流瀏覽器並支持這些主流瀏覽器的較低版本,在基於Webkit的Chrome和Safari等瀏覽器上使用box-shadow屬性時,我們需要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式。

.box-shadow{  
  
         //Firefox4.0-  
  
         -moz-box-shadow:投影方式 X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色;  
  
         //Safariand Google chrome10.0-  
  
         -webkit-box-shadow:投影方式 X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色;  
  
         //Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9  
  
         box-shadow:  投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;
  }

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM