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軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色; }