博文
所有评论
CSS教程，简单易懂，一看就会系列专辑
看过上一篇CSS教程5、CSS滤镜12、Wave属性来了解：
CSS教程5、CSS滤镜13、Xray属性
Xray就是X射线的意思。
Xray属性，顾名思义，这种属性产生的效果就是使对象看上去有一种X光片的感觉。 它的表达式很简单：
Filter：Xray
我们还是先来看一个页面（如下图）：
如果在上面的页面中加入Xray属性，也就是在<head>的<Style>中，增添下面这一句代码：
Filter：Xray
您再看这个页面就会是另一种效果了：（如下图）
看，是不是就像给它拍了一张X光片一样。
基本结束
相关系列：
CSS属性列表
CSS教程，简单易懂，一看就会系列专辑
Blogger教学课程
了解更多信息！
CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜11、Shadow属性
CSS教程5、CSS滤镜12、Wave属性
Wave属性用来把对象按照垂直的波纹样式打乱。它的表达式如下：
Filter：Wave（Add=True（False），Freq=频率，LightStrength=增强光效，
Phase=偏移量，Strength=强度）
我们看到Wave属性的表达式还是比较复杂的，它一共有五个参数。Add参数有两个参数值：True代表把对象按照波纹样式打乱；False代表不打乱；
Freq参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹。 LightStrength参数是为了使生成的波纹增强光的效果。参数值可以从0到100。 Phase参数用来设置正弦波开始的偏移量。这个值的通用值为0，它的可变范围为从0到100。这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360*25%）的方向开始。
说了一大堆，我们还是先看一个实例吧。比如下面这幅图片
下面我们对上面这个页面加上Wave效果，代码如下：<html>
<head>
<title> wave css</title>
<style>//*定义CSS 样式开始*//
<!--
.leaf{position:absolute；top:10；width:300；
filter:wave(add=true,freq=3,lightstrength=100,
phase=45,strength=20)；}
//*设置leaf类的样式，绝对定位，wave属性，产生3个波纹， 光强为100，波纹
从162度（360*45%）开始，振幅为20*//
img{position:absolute;top:110;left:40;
filter:wave(add=true,freq=3,lightstrength=100,
phase=25,strength=5)；}
//*设置IMG的样式，绝对定位，wave属性，产生3个波纹，光强为100，波纹从
90度开始，振幅为5*//
-->
</style>
</head>
<body>
<div class=“wave”>//*定义DIV区域内为Wave类*//
<p style=“font-family：lucida handwriting；
font-size=72pt； font-weight：bold；
color：rgb(189,1,64)；”>Leaf
//*设置字体名称、大小、粗细、颜色*//
</div>
<p><img src=“ss01044.jpg”> //*导入图片*//
</body>
</html>
这段代码实现的效果如下图：
如果把Wave的参数随便做一下改动，就会达到多种效果，请看另外一种效果：（如下图）：
其实这种效果只是增大了freq参数的值，减小了Strength、LightStrength的值就可以了。您也可以多试试，改变其他的参数值，还可以达到许多不同的效果来。
本节主要讲述了Wave属性的应用，下一节将向您介绍Xray属性。CSS教程5、CSS滤镜13、Xray属性
了解更多信息！
CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜10、Mask属性
CSS教程5、CSS滤镜11、Shadow属性
Shadow属性可以在指定的方向建立物体的投影。它的表达式是这样的：
Filter：Shadow（Color=color，Direction=direction）
在这里，Shadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向。
这里说的方向与我们在第二节Blur属性中提到的“方向与角度的关系”是一样的。 也许您会问，前面讲到的Dropshadow属性和Shadow属性有什么不同吗？
光说的话，您恐怕还难以理解，让我们看一看分别利用这两个属性做出来的效果有什么不同（见下图）：
这样一对比，就可以很明显的看出两者的不同。
Shadow属性可以在任意角度进行投射阴影，Dropshadow属性实际上是用偏移来定义阴影的。所以，看上去左图的文字和阴影就像是一体的，而右图的文字就像脱离了阴影一样。
本例的代码如下：<html>
<head>
<title> shadow</title>
<style>//*开始设置CSS样式*//
<!--
.shadow{position:absolute；top:20；width:300；
filter:shadow(color=#cc66ff,direction=225)；}
//*定义Shadow类的样式，绝对定位，Shadow属性，阴影颜色、投影方向*//
.dropshadow{position:absolute；top:180；width:300；
filter:dropshadow(color=#cc66ff,offx=10,offy=10,positive=1)；}
//*设置Dropshadow类的样式，样式与Shadow类相似， 不同的是滤镜用了
Dropshadow属性，设置X轴和Y轴的偏移量*//
-->
</style>
</head>
<body>
<div class=“shadow”>//*区域内为Shadow类*//
<p style=“font-family：bailey；font-size：48pt；
font-weight：bold；color：#FF9900；”>
Hongen Online//*定义字体名称、大小、粗细、前景色*//
</div>
<div class=“dropshadow”>//*区域内为Dropshadow类*//
<p style=“font-family：bailey；font-size：48pt；
font-weight：bold；color：#FF9900；”>
Hongen Online//*定义字体样式与Shadow类的一样*//
</div>
</body>
</html>
本节讲述了Shadow属性的应用，下一节将向您介绍Wave（波纹）属性。
CSS教程5、CSS滤镜12、Wave属性
了解更多信息！
CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜 9、Invert属性
CSS教程5、CSS滤镜10、Mask属性
Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单：
Filter：Mask（Color=颜色）
只有一个Color参数，用来指定使用什么颜色作为掩膜。
同样，我们来看一下一幅图片在加上mask属性前后的效果（见下图）：
加上MASK属性的效果就好象是在用有色眼镜看物体一样。上面的效果的代码如下：<html>
<head>
<title> mask filter </title>
<style>//*设置CSS样式开始*//
<!--
div{position：absolute；top：20；left：40；
filter：mask(color：#666699)；}
//*定义DIV区域的样式，绝对定位，mask属性的color参数值指定用什么颜色遮
住对象*//
p{font-family：bailey；font-size：72pt；
font-weight：bold；color：#FF9900；}
//*定义P区域内的样式，字体名称、大小、粗细、前景色*//
-->
</style>
</head>
<body>
<div>
<p> wenyleaf </p>
</div>
</body>
</html>
其实，您就算在代码中去掉对字体前景色的定义，得到的效果还是一样的。因为有了Mask属性的定义，它遮罩下的字体颜色的设置就已经失去了意义。
还有一点需要您注意的地方，mask属性对图片文件的支持还是不够，不能达到应该有的效果。
本节讲解了Mask属性的应用，下一节将向您介绍Shadow（阴影）属性。
CSS教程5、CSS滤镜11、Shadow属性
了解更多信息！
CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜8、Gray属性
CSS教程5、CSS滤镜 9、Invert属性
Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。
它的表达式也很简单：
Filter：Invert
我们再来看一下加上Invert属性前后的图片效果变化（如下图）：
我们看到Invert属性实际上达到的是一种“底片”的效果。
自己拿别的图来试试吧。 本节介绍的是Invert属性，下一节将向您介绍Mask属性。
CSS教程5、CSS滤镜10、Mask属性
了解更多信息！
CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜7、Glow属性这篇：
CSS教程5、CSS滤镜8、Gray属性
Gray属性把一张图片变成灰度图。它的表达式很简单：
Filter：Gray
其实这个属性没什么好讲的，只需在您定义的IMG样式中加入一句代码：
{Filter：Gray}就一切OK了。
下面两幅图分别代表未加Gray属性和添加了Gray属性的效果：
本节讲述的内容比较简单，下一节将向您介绍Invert转化属性。CSS教程5、CSS滤镜 9、Invert属性
了解更多信息！
CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜6、FlipH、FlipV属性
CSS教程5、CSS滤镜7、Glow属性
当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果。它的表达式如下：
Filter：Glow（Color=color，Strength=strength）
Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。 让我们先来看一下加上Glow属性的效果图：
怎么样，是不是有一种燃烧的火焰的感觉。实现这种效果的代码如下：<html>
<head>
<title>filter glow</title>
<style>//*开始设置CSS样式*//
<!--
.leaf{position：absolute； top：20； width：400；
filter：glow(color=#FF3399,strength=15)；}
//*设置类leaf，绝对定位，Glow滤镜属性，发光颜色值为#FF3399，强度为
15*//
.weny{position：absolute； top：70； left：50； width：300；
filter：glow(color=#9966CC,strength=10)；}
//*设置类weny，绝对定位，glow滤镜属性，发光颜色值为#9966CC，强度为
15*//
-->
</style>
</head>
<body>
<div class=“leaf”>//*leaf类样式*//
<p style=“font-family：lucida handwriting；
font-size：54pt；font-weight：bold；color：#003366；”>
Leaf Mylove//*设置字体名称、大小、粗细、颜色*//
</div>
<div class=“weny”>//*weny类样式*//
<p style=“font-family：bailey； font-size：48pt；
font-weight：bold；color：#99CC66；”>
//设置字体名称、大小、粗细、颜色*//
Weny Good!
</div>
</body>
</html>
您还可以随意修改颜色值，看看其他的发光效果是怎样的。
本节主要讲了Glow属性的应用，下一节将向您介绍Gray属性。CSS教程5、CSS滤镜8、Gray属性
了解更多信息！
1柠檬绿茶 
彩妆 香水 护肤 美体
女装 女士精品
2日韓平價良品店
3皮草皮衣卡丹路
4精挑细选
5情侣礼品-官方店
男装精品
2只卖最低价内衣
3品牌男装服装
4时尚你我服饰店
5香港街皮带/包/具
2◆地球礼品商城■≡专营外贸家居工艺品 卡通家居礼品◆
3魅影时尚奢华箱包－淘宝总店
4◣乐天韩国饰品釜山商城◢庆五皇冠全场韩饰包邮!24小时内发货!
5【特索通讯】十大网商 ZIPPO 瑞士军刀 男士精品
9【水靈總店】IRIS水靈の雙皇冠級臺灣原版流行趨勢&專輯專賣店
10【毛网商城 毛王商社 江苏商盟 淘宝第一信誉数码摄影店】
© 广告业务联系站长：wj9931@gmail.com 或 QQ42032058.
