CSS濾鏡:Shadow屬性
Shadow屬性可以在指定的方向建立物體的投影。它的表達式是這樣的：
Filter：Shadow（Color=color，Direction=direction）
在這里，Shadow有兩個參數(shù)值：Color參數(shù)用來指定投影的顏色；Direction參數(shù)用來指定投影的方向。
這里說的方向與我們在第二節(jié)Blur屬性中提到的“方向與角度的關系”是一樣的。 也許您會問，前面講到的Dropshadow屬性和Shadow屬性有什么不同嗎？
光說的話，您恐怕還難以理解，讓我們看一看分別利用這兩個屬性做出來的效果有什么不同（見下圖）：
Shadow效果 Dropshadow效果
這樣一對比，就可以很明顯的看出兩者的不同。
Shadow屬性可以在任意角度進行投射陰影，Dropshadow屬性實際上是用偏移來定義陰影的。所以，看上去左圖的文字和陰影就像是一體的，而右圖的文字就像脫離了陰影一樣。
本例的代碼如下：
<html>
<head>
<title> shadow</title>
<style>//*開始設置CSS樣式*//
<!--
.shadow{position:absolute；top:20；width:300；
filter:shadow(color=#cc66ff,direction=225)；}
//*定義Shadow類的樣式，絕對定位，Shadow屬性，陰影顏色、投影方向*//
.dropshadow{position:absolute；top:180；width:300；
filter:dropshadow(color=#cc66ff,offx=10,offy=10,positive=1)；}
//*設置Dropshadow類的樣式，樣式與Shadow類相似， 不同的是濾鏡用了
Dropshadow屬性，設置X軸和Y軸的偏移量*//
-->
</style>
</head>
<body>
<div class=“shadow”>//*區(qū)域內(nèi)為Shadow類*//
<p style=“font-family：bailey；font-size：48pt；
font-weight：bold；color：#FF9900；”>
Hongen Online</p>//*定義字體名稱、大小、粗細、前景色*//
</div>
<div class=“dropshadow”>//*區(qū)域內(nèi)為Dropshadow類*//
<p style=“font-family：bailey；font-size：48pt；
font-weight：bold；color：#FF9900；”>
Hongen Online</p>//*定義字體樣式與Shadow類的一樣*//
</div>
</body>
</html>
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答！！ 點擊進入論壇
您可能感興趣的文章:
- 上一篇：CSS濾鏡:Wave屬性
- 下一篇：CSS濾鏡:Invert屬性
