CSS滤镜[2]（CSS的滤镜属性的标识符是filter）
[TABLE][TR][TD][SIZE=5]CSS滤镜[2]（CSS的滤镜属性的标识符是filter）[/SIZE][/TD][/TR][TR][TD][/TD][/TR][TR][TD][TR][TD][B][COLOR=#336633]5、DropShadow属性[/COLOR][/B] [PP] DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。看一看它的表达式：
[PP] [COLOR=#006666]Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，
Positive=positive）[/COLOR]
[PP] 该属性一共有四个参数： Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。
Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。
同样，我们先来看一个例子（见下图）：
[ALIGN=center][img]http://www.ymxd.com/index/UploadFiles/200541241050734.gif[/img]
[PP] 看，图中的文字就像是从页面上飞出来一样，并且留下了一层淡淡的影子。
实际上在这里应用的就是CSS的DropShadow属性，我们来看一下它的代码：
[PP] [COLOR=#006666]<html>
<head>
<title>dropshadow </title>
<style>[/COLOR][COLOR=#cc33cc]//*定义CSS样式*//[/COLOR]
[COLOR=#006666]<!--
div {position:absolute；top:20；width:300；
filter:dropshadow(color=#FFCCFF,offx=15,offy=10,positive=1)；}
--> [/COLOR]
[COLOR=#cc33cc]//*定义DIV范围内的样式，绝对定位，投影的颜色为#FFCCFF，
投影坐标为向右偏移15个像素，向下偏移10个像素*// [/COLOR]
[COLOR=#006666]</style>
</head>
<body>
<div>
<p style=“font-family：matisse itc；font-size：64；
font-weight：bold；color：#CC00CC；”>[/COLOR]
[COLOR=#cc33cc]//*定义字体名称、大小、粗细、颜色*//[/COLOR]
[COLOR=#006666]Love Leaf </p>
</div>
</body>
</html>[/COLOR]
[PP] 和chroma属性一样，Dropshadow属性对图象的支持不好，我指的是JPEG、GIF格式的图象文件。
不能支持的原因与Chroma一样，因为这种图象的颜色很丰富，很难找到一个投射阴影的位置。
[PP] 本节讲述了Dropshadow属性的应用，下一节将向您介绍FlipH、FlipV的属性应用。
[HR][B][COLOR=#336633]6、FlipH、FlipV属性[/COLOR][/B] [PP] Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是：
[PP] [COLOR=#006666]Filter：FlipH[/COLOR]
[PP] [COLOR=#006666]Filter：FlipV[/COLOR]
[PP] 我们先来看一幅图：点击可放大[/ALIGN][ALIGN=center][URL=http://www.ymxd.com/index/UploadFiles/200541241050580.jpg][img]http://www.ymxd.com/index/UploadFiles/200541241050621.gif[/img][/URL]
[PP] 下面我们分别对它实现水平翻转和垂直翻转，并且在图片上方的一段文字，也发生翻转。代码如下：
[PP] [COLOR=#006666]<html>
<head>
<title>flip css</title>
<style>[/COLOR][COLOR=#cc33cc]//*设置CSS样式开始*//[/COLOR]
[COLOR=#006666]<!--
div{position：absolute；top：20；width：300；
filter：fliph（flipv）；} [/COLOR]
[COLOR=#cc33cc]//*定义DIV范围内的样式，绝对定位，翻转为水平翻转或垂直翻转。
注意：在这里fliph和flipv只取其中的一个*// [/COLOR]
[COLOR=#006666]img{position：absolute；top：70；left：40；
filter：fliph（flipv）；} [/COLOR]
[COLOR=#cc33cc]//*定义图片的样式，绝对定位，翻转属性和DIV一样。*// [/COLOR]
[COLOR=#006666]-->
</style>
</head>
<body>
<div>
<p style=“font-family：bailey；font-size：36pt；
font-weight：bold； color：rgb(10,128,156)；”>
Leaf Village </p>[/COLOR]
[COLOR=#cc33cc]//*定义字体名称、大小、粗细、颜色*//[/COLOR]
[COLOR=#006666]</div>
<p><img src=“ss05058.jpg”></p>[/COLOR]
[COLOR=#cc33cc] //*导入一张图片*//[/COLOR]
[COLOR=#006666]</body>
</html>[/COLOR]
[PP] 代码产生的两个效果分别如下图：（点击可以放大）[/ALIGN][ALIGN=center][URL=http://www.ymxd.com/index/UploadFiles/200541241050360.jpg][img]http://www.ymxd.com/index/UploadFiles/200541241050371.gif[/img][/URL] [URL=http://www.ymxd.com/index/UploadFiles/200541241050797.jpg][img]http://www.ymxd.com/index/UploadFiles/200541241050112.gif[/img][/URL]
[PP] [COLOR=#cc3399]水平翻转[/COLOR] [COLOR=#cc3399]垂直翻转[/COLOR]
[PP] 翻转的属性应用是不是很简单。下一节我将向您介绍Glow属性。
[HR][B][COLOR=#336633]8、Glow属性[/COLOR][/B] [PP] 当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果。它的表达式如下：
[PP] [COLOR=#006666]Filter：Glow（Color=color，Strength=strength） [/COLOR]
[PP] Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。 让我们先来看一下加上Glow属性的效果图：[/ALIGN][ALIGN=center][img]http://www.ymxd.com/index/UploadFiles/200541241050784.gif[/img]
[PP] 怎么样，是不是有一种燃烧的火焰的感觉。实现这种效果的代码如下：
[PP] [COLOR=#006666]<html>
<head>
<title>filter glow</title>
<style>[/COLOR][COLOR=#cc33cc]//*开始设置CSS样式*//[/COLOR]
[COLOR=#006666]<!--
.leaf{position：absolute； top：20； width：400；
filter：glow(color=#FF3399,strength=15)；}[/COLOR]
[COLOR=#cc33cc]//*设置类leaf，绝对定位，Glow滤镜属性，发光颜色值为#FF3399，强度为
15*//[/COLOR]
[COLOR=#006666].weny{position：absolute； top：70； left：50； width：300；
filter：glow(color=#9966CC,strength=10)；}[/COLOR]
[COLOR=#cc33cc] //*设置类weny，绝对定位，glow滤镜属性，发光颜色值为#9966CC，强度为
15*// [/COLOR]
[COLOR=#006666] -->
</style>
</head>
<body>
<div class=“leaf”>[/COLOR][COLOR=#cc33cc]//*leaf类样式*//[/COLOR]
[COLOR=#006666]<p style=“font-family：lucida handwriting；
font-size：54pt；font-weight：bold；color：#003366；”>
Leaf Mylove</p>[/COLOR][COLOR=#cc33cc]//*设置字体名称、大小、粗细、颜色*//[/COLOR]
[COLOR=#006666]</div>
<div class=“weny”>[/COLOR][COLOR=#cc33cc]//*weny类样式*//[/COLOR]
[COLOR=#006666]<p style=“font-family：bailey； font-size：48pt；
font-weight：bold；color：#99CC66；”>[/COLOR]
[COLOR=#cc33cc]//设置字体名称、大小、粗细、颜色*//[/COLOR]
[COLOR=#006666] Weny Good!</p>
</div>
</body>
</html>[/COLOR]
[PP][COLOR=#006666] [/COLOR]您还可以随意修改颜色值，看看其他的发光效果是怎样的。
本节主要讲了Glow属性的应用，下一节将向您介绍Gray属性。[COLOR=#006666] [/COLOR]
[HR][B][COLOR=#336633]7、Gray属性[/COLOR][/B] [PP] Gray属性把一张图片变成灰度图。它的表达式很简单：
[PP] [COLOR=#006666]Filter：Gray[/COLOR]
[PP] 其实这个属性没什么好讲的，只需在您定义的IMG样式中加入一句代码：
[PP] [COLOR=#006666]{Filter：Gray}[/COLOR]就一切OK了。
下面两幅图分别代表未加Gray属性和添加了Gray属性的效果：[/ALIGN][ALIGN=center][URL=http://www.ymxd.com/index/UploadFiles/200541241050833.jpg][img]http://www.ymxd.com/index/UploadFiles/200541241050738.gif[/img][/URL]
[PP][COLOR=#cc0033]这是原图，点击可放大[/COLOR][/ALIGN][ALIGN=center][img]http://www.ymxd.com/index/UploadFiles/200541241050140.gif[/img]
[PP][COLOR=#cc0033]转成gray属性后的效果图[/COLOR]
[PP] 本节讲述的内容比较简单，下一节将向您介绍Invert转化属性。
[HR][B][COLOR=#336633]9、Invert属性[/COLOR][/B] [PP] Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。
它的表达式也很简单：
[PP] [COLOR=#006666]Filter：Invert[/COLOR]
[PP] 我们再来看一下加上Invert属性前后的图片效果变化（如下图）：[/ALIGN][ALIGN=center][URL=http://www.ymxd.com/index/UploadFiles/200541241050472.jpg][img]http://www.ymxd.com/index/UploadFiles/200541241050876.gif[/img][/URL] [URL=http://www.ymxd.com/index/UploadFiles/200541241051811.jpg][img]http://www.ymxd.com/index/UploadFiles/200541241051436.gif[/img][/URL]
[PP] [COLOR=#cc0033]原图 Invert属性效果图
（点击可放大） （点击可放大）[/COLOR]
[PP][COLOR=#cc0033] [/COLOR]我们看到Invert属性实际上达到的是一种“底片”的效果。
自己拿别的图来试试吧。 本节介绍的是Invert属性，下一节将向您介绍Mask属性。
[HR]
[/ALIGN][/TD][/TR][/TABLE][/TD][/TR]
