CSS中有兩種陰影效果,一種是DropShadow(投影),另一種是Shadow(陰影).
1、DropShadow
語法:{FILTER:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)}
Color 代表投影的顏色,格式為“#RRGGBB”
OffX 和 OffY 代表x和y方向的投影偏移量。必須用整數值,正數代表x軸的右方向和y軸的下方向。負值相反。
Positive 參數是一個布爾值。值為true(非0),那么就為任何的非透明像素建立可見的投影。如果值為false(0),那么就為透明的像素部分建立可見的投影。
2、Shadow
語法:{FILTER:Shadow(Color=color,Direction=direction)}
Color 代表陰影的顏色,格式為“#RRGGBB”
Direction是設置投影的方向,按照順時針方向進行,0度代表垂直向上,然后每45度為一個單位。默認值是向左的270度。共8個方向。
下面是應用這兩個的例子:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.dropshadow { filter: DropShadow(Color=green, OffX=5, OffY=5, Positive=1); position: absolute; font-size: 14pt; font-weight: bolder; top: 20px; clip: rect( ); left: 20px}
.shadow { filter: Shadow(Color=green, Direction=135); position: absolute; font-size: 14pt; font-weight: bolder ; left: 350px; top: 20px; clip: rect( )}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
<span class="dropshadow"><b>DropShadow</b></span>
<span class="shadow">Shadow</span>
</body>
</html>
這兩個屬性是有區別的,Shadow依靠指定的角度值投射陰影,這些陰影是對象原先部分的延伸。而DropShadow是依靠指定在x方向和y方向的偏移量來定義投影的,這些投影其實是對象原封不動的移動。