当前位置导航：炫浪网>>网络学院>>网页制作>>HTML与CSS教程

Invert属性、Glow属性和FlipH、FlipV属性

Invert属性

　　Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。
　　它的表达式也很简单：

　　Filter：Invert

　　我们再来看一下加上Invert属性前后的图片效果变化（如下图）：

原图　　　 Invert属性效果图

　　我们看到Invert属性实际上达到的是一种“底片”的效果。
　　自己拿别的图来试试吧。

Glow属性

　　当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果。它的表达式如下：
　　Filter：Glow（Color=color，Strength=strength）
　　Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。让我们先来看一下加上Glow属性的效果图：

怎么样，是不是有一种燃烧的火焰的感觉。实现这种效果的代码如下：
　　 <html>
　　　 <head>
　　　 <title>filter glow</title>
　　　 <style>//*开始设置CSS样式*//
　　　 
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <div class=“leaf”>//*leaf类样式*//
　　　 <p style=“font-family：lucida handwriting；
　　　　　　　　　font-size：54pt；font-weight：bold；color：#003366；”>
　　　　Leaf Mylove</p>//*设置字体名称、大小、粗细、颜色*//
　　　 </div>
　　　 <div class=“weny”>//*weny类样式*//
　　　 <p style=“font-family：bailey； font-size：48pt；
　　　　　　　　　font-weight：bold；color：#99CC66；”>
　　　 file://设置字体名称、大小、粗细、颜色*//
　　　 Weny Good!</p>
　　　 </div>
　　　 </body>
　　</html>

　　您还可以随意修改颜色值，看看其他的发光效果是怎样的。

FlipH、FlipV属性
　　Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是：
　　Filter：FlipH
　　Filter：FlipV
　　我们先来看一幅图：

下面我们分别对它实现水平翻转和垂直翻转，并且在图片上方的一段文字，也发生翻转。代码如下：
　　<html>
　　　<head>
　　　<title>flip css</title>
　　　<style>//*设置CSS样式开始*//
　　　
　　 </style>
　　 </head>
　　　<body>
　　　<div>
　　　<p style=“font-family：bailey；font-size：36pt；
　　　　　　　　　font-weight：bold； color：rgb(10,128,156)；”>
　　　 Leaf Village </p>
　　 file://*定义字体名称、大小、粗细、颜色*//
　　 </div>
　　 <p><img src=“ss05058.jpg?http://www.xvna.com”></p>
　　 file://*导入一张图片*//
　　 </body>
　　</html>
　　代码产生的两个效果分别如下图：

水平翻转　　　　　　垂直翻转

　　翻转的属性应用是不是很简单。

上一篇：巧用CSS制作可控闪烁效果下一篇：DropShadow属性、Chroma属性和blur属性效果