DropShadow属性、Chroma属性和blur属性效果
2008-02-23 08:27:14来源：互联网 阅读 ()
DropShadow属性
DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。看一看它的表达式：
Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，
Positive=positive）
该属性一共有四个参数： Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。
Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。
同样，我们先来看一个例子（见下图）：
看，图中的文字就像是从页面上飞出来一样，并且留下了一层淡淡的影子。
实际上在这里应用的就是CSS的DropShadow属性，我们来看一下它的代码：
<html>
<head>
<title>dropshadow </title>
<style>//*定义CSS样式*//
<!--
div {position:absolute；top:20；width:300；
filter:dropshadow(color=#FFCCFF,offx=15,offy=10,positive=1)；}
-->
file://*定义DIV范围内的样式，绝对定位，投影的颜色为#FFCCFF，
投影坐标为向右偏移15个像素，向下偏移10个像素*//
</style>
</head>
<body>
<div>
<p style=“font-family：matisse itc；font-size：64；
font-weight：bold；color：#CC00CC；”>
file://*定义字体名称、大小、粗细、颜色*//
Love Leaf </p>
</div>
</body>
</html>
和chroma属性一样，Dropshadow属性对图象的支持不好，我指的是JPEG、GIF格式的图象文件。不能支持的原因与Chroma一样，因为这种图象的颜色很丰富，很难找到一个投射阴影的位置。
Chroma属性
Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下：
Filter：Chroma（color=color）
这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图：
图中显示两种字体，两种颜色，我们现在对“leaves”字体添加chroma属性，使其透明。代码如下：
<html>
<head>
<title>chroma filter</title>
<style>
<!--
div{position：absolute；top：70；width：200；
filter：chroma(color=green)}
file://*定义DIV范围内绿色为透明色，另外设置DIV的位置*//
p{font-family：bailey；font-size：48；font-weight：bold；
color：green} file://*设置P的字体名称、大小、粗细、颜色*//
em{font-family:lucida handwriting italic；font-size:48；
font-weight：bold；color：rgb(255,51,153)}
file://*设置EM的字体名称、大小、粗细、颜色*//
-->
</style>
</head>
<body>
<div>
<p>LEAVES <em>LOVE</em></p>
</div>
</body>
</html>
通过上面代码中对chroma的属性设置，使绿色透明。显示效果如下图：
我们看到绿色的leaves字体不见了，实际上它是透明了，在IE下点击它所在的区域，它还是会显示出来（见下图）：
另外，需要注意的是，chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理（比如JPG、GIF等格式），所以它们很少有固定的位置可以设置为透明。
通过blur属性还可以设置页面中的字体。如果把字体的blur属性add参数值定义为1，得出来的字体效果是这样的（如下图）：
怎么样，是不是有些印象派的意思，这种效果的实现代码如下：
<html>
<head>
<title>filter blur</title>
<style>//*CSS样式定义开始*//
<!--
div{width：200；
filter：blur(add=true,direction=90,strength=25)；}
file://*设置DIV样式，滤镜blur属性*//
-->
</style>
</head>
<body>
<div style=“width:702； height: 288”>
<p style=“font-family:lucida handwirting italic；
font-size:72；font-style:bold；color:rgb(55,72,145)；” >
LEAF</p>
file://*定义字体名称、大小、样式、前景色*//
</div>
</body>
</html>
我们看到strength设置为25，如果把其值再改大一些，就会达到非常夸张的效果，同时把Direction参数值为180，显示效果如下图：
用blur属性设置字体可以达到很多效果，把direction和strength再做修改，还能达到多种效果，您可以自己修改试一试。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：深入学习网页技术CSS，再谈div、span的困惑！
下一篇：CSS的优化与技巧
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
