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方向的偏移量来定义投影的,这些投影其实是对象原封不动的移动。