CSS实现文字阴影的效果

最新推荐文章于 2024-03-31 22:19:08 发布

weixin_30580943

最新推荐文章于 2024-03-31 22:19:08 发布

阅读量221

点赞数

原文链接：http://www.cnblogs.com/weimingxin/p/7272221.html

版权

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">

</style>
</head>

<body bgcolor="#FFFFFF">
<span class="dropshadow"><b>DropShadow</b></span>
<span class="shadow">Shadow</span>
</body>
</html>

这两个属性是有区别的，Shadow依靠指定的角度值投射阴影，这些阴影是对象原先部分的延伸。而DropShadow是依靠指定在x方向和y方向的偏移量来定义投影的，这些投影其实是对象原封不动的移动。

转载于:https://www.cnblogs.com/weimingxin/p/7272221.html

weixin_30580943

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现文字阴影的效果

CSS中有两种阴影效果,一种是DropShadow(投影),另一种是Shadow(阴影).1、DropShadow语法：{FILTER:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)}Color 代表投影的颜色，格式为“#RRGGBB”OffX 和 OffY 代表x和y方向的投影偏移量。必须用整数值，正数代表x轴的右方向和...
复制链接

扫一扫