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

2009-12-16 01:21| 发布者: admin| 查看: 54| 评论: 0|原作者: 冰淇淋

Invert属性

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

　　Filter：Invert

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

原图　　　

Invert属性效果图

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

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

　　怎么样，是不是有一种燃烧的火焰的感觉。实现这种效果的代码如下：
　　
　　　
　　　 filter glow
　　　
　　　
　　　
　　　

//*leaf类样式*//
　　　

　　　　　　　　　font-size：54pt；font-weight：bold；color：#003366；”>
　　　　Leaf Mylove

//*设置字体名称、大小、粗细、颜色*//
　　　

//*weny类样式*//
　　　

　　　　　　　　　font-weight：bold；color：#99CC66；”>
　　　 file://设置字体名称、大小、粗细、颜色*//
　　　 Weny Good!

　　　
　　

　　您还可以随意修改颜色值，看看其他的发光效果是怎样的。
FlipH、FlipV属性
　　Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是：
　　Filter：FlipH
　　Filter：FlipV
　　我们先来看一幅图：

　　下面我们分别对它实现水平翻转和垂直翻转，并且在图片上方的一段文字，也发生翻转。代码如下：
　　
　　　
　　　flip css
　　　
　　
　　　
　　　

　　　　　　　　　font-weight：bold； color：rgb(10,128,156)；”>
　　　 Leaf Village

　　 file://*定义字体名称、大小、粗细、颜色*//
　　

　　 file://*导入一张图片*//
　　
　　
　　代码产生的两个效果分别如下图：　　　　　　　　　　　　　

水平翻转　　　　　　

垂直翻转

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

收藏分享邀请

		自动登录	找回密码
密码			注册

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

最新评论

相关分类