CSS中的DropShadow屬性主要是為了給對象添加陰影效果,一般用於文字陰影和圖片陰影,今天通過一個例子來說明如何實現文字陰影效果。先來熟悉下DropShadow用法表達式:
filter:dropshadow(Color=color,Offx=Offx,Offy=offy,Positive=positive)
Color:陰影的顏色;Offx和offy分別代表X方向和Y方向陰影的偏移量。必須是整數,若為正整數,則陰影在X軸的右側和Y軸下側,負整數則相反。
Positive參數是布爾值:設置為True時:任何非透明像素均可建立可見的投影,False時為透明像素部分建立可見投影。下面來一段應用dropshadow的Html代碼和演示效果:
1
<
div
style
=
"filter: dropshadow(color=#FFCCFF,offx=9,offy=9,positive=1); width: 407px; height: 130px; top: 20px"
><
br
><
p
style
=
"line-height: 130px; font-family: 微軟雅黑; height: 130px; color: #336699; font-size: 66px; font-weight: bold"
>源碼愛好者 </
p
>
源碼愛好者
需要注意的是:一般不使用Dropshadow屬性修飾圖片,因為Dropshadow屬性對JPEG、GIF格式圖象文件的支持並不是太好,因為圖象的顏色豐富,CSS很難找到一個投射陰影的位置。