text-shadow是給文本添加陰影效果币励,box-shadow是給元素塊添加周邊陰影效果。
文字陰影的結構是按照以下順序:X--偏移掸冤,Y--偏移厘托,模糊,和顏色;
text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);
設置為負值稿湿,X -偏移陰影轉移到左側铅匹。設置為負值偏移Y -轉移陰影頂端。顏色可以用RGBA值饺藤。
1x 0px #000包斑;
文字陰影的列表(以逗號分隔),1px的頂部和底部1px的陰影。
基本語法是{
? ? ? box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor
}
對象選擇器 {
? ? box-shadow:[投影方式] X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色
}
background:transparent; 等價background:rgba(0,0,0,0);
color:transparent;等價color:rgba(0,0,0,0););
陰影類型:此參數可選涕俗。如不設值罗丰,默認投影方式是外陰影;如取其唯一值“inset”再姑,其投影為內陰影萌抵;
X-offset:陰影水平偏移量,其值可以是正負值元镀。如果值為正值绍填,則陰影在對象的右邊,其值為負值時栖疑,陰影在對象的左邊讨永;
Y-offset:陰影垂直偏移量,其值也可以是正負值蔽挠。如果為正值住闯,陰影在對象的底部,其值為負值時澳淑,陰影在對象的頂部比原;
陰影模糊半徑:此參數可選,杠巡,但其值只能是為正值量窘,如果其值為0時,表示陰影不具有模糊效果氢拥,其值越大陰影的邊緣就越模糊蚌铜;
陰影擴展半徑:此參數可選,其值可以是正負值嫩海,如果值為正冬殃,則整個陰影都延展擴大,反之值為負值時叁怪,則縮猩笤帷;
.box-shadow{
? ? ? ?1)? 從.box-shadow-1的效果可以得出不指定屬性陰影顏色的情況下奕谭,陰影在webkit內核下的safari和chrome瀏覽器下表現(xiàn)為透明色涣觉,在Firefox/Opera下表現(xiàn)為黑色。
-webkit-box-shadow: 3px 3px 3px;//Firefox4.0-
? ? -moz-box-shadow:投影方式?X軸偏移量?Y軸偏移量陰影模糊半徑?陰影擴展半徑?陰影顏色;
//Safariand?Google?chrome10.0-
-webkit-box-shadow:投影方式?X軸偏移量?Y軸偏移量陰影模糊半徑?陰影擴展半徑?陰影顏色;
//Firefox4.0+血柳、?Google?chrome10.0+?官册、?Oprea10.5+?and?IE9
box-shadow:??投影方式?X軸偏移量?Y軸偏移量?陰影模糊半徑?陰影擴展半徑?陰影顏色;
}
-moz-box-shadow: 3px 3px 3px;
box-shadow: 3px 3px 3px;
2)? 從內外兩個div塊inner、outer的對比來看难捌,所有支持box-shadow的主流瀏覽器都表現(xiàn)為:內層陰影撐破外層容器將整個陰影效果呈現(xiàn)出來膝宁。