css3 box-shadow的值

css3中box-shadow是給元素塊添加周邊陰影效果。

1、語法

 

box-shadow:inset x-offset y-offset blur-radius spread-radius color

 

也就是

 

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

 

 

 

2、box-shadow取值說明

box-shadow屬性至多有6個參數設置，他們分別取值：

 

一、陰影類型

 

此參數是一個可選值，若是不設值，其默認的投影方式是外陰影；若是取其惟一值「inset」,就是將外陰影變成內陰影，也就是說設置陰影類型爲「inset」時，其投影就是內陰影；

二、X-offset

 

是指陰影水平偏移量其值能夠是正負值能夠取正負值，若是值爲正值，則陰影在對象的右邊，反之其值爲負值時，陰影在對象的左邊；

三、Y-offset

 

是指陰影的垂直偏移量，其值也能夠是正負值，若是爲正值，陰影在對象的底部，反之其值爲負值時，陰影在對象的頂部；

 

 

四、陰影模糊半徑

 

此參數是可選，但其值只能是爲正值，若是其值爲0時，表示陰影不具備模糊效果，其值越大陰影的邊緣就越模糊； 

 

五、陰影擴展半徑

此參數可選，其值能夠是正負值，若是值爲正，則整個陰影都延展擴大，反之值爲負值是，則縮小

 

六、陰影顏色

此參數可選，若是不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不同，特別是在webkit內核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。

 

備註

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