正文
CSS实现文字阴影的效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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方向的偏移量来定义投影的，这些投影其实是对象原封不动的移动。
