CSS快速入门[肿瘤咨询在线论坛]

dvbbs

收藏本页

联系我们

论坛帮助

dvbbs

>> 电脑网络管理、网页制作、免费素材、经验交流、软硬件......

搜一搜相关精彩主题

肿瘤咨询在线论坛 → 站务服务 → 『电脑网络』 → CSS快速入门

您是本帖的第 6271 个阅读者

树形打印

标题：

CSS快速入门

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 21 楼

五、CSS滤镜

　　6、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>
　　 //*定义字体名称、大小、粗细、颜色*//
　　 </div>
　　 <p><img src=“ss05058.jpg”></p>
　　 //*导入一张图片*//
　　 </body>
　　</html>

　　代码产生的两个效果分别如下图：（点击可以放大）

　　　　　　　　水平翻转　　　　　　　　　　　　　　　　垂直翻转

　　翻转的属性应用是不是很简单。下一节我将向您介绍Glow属性。

2005-9-27 12:58:20

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 22 楼

五、CSS滤镜

　　8、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；”>
　　　 //设置字体名称、大小、粗细、颜色*//
　　　 Weny Good!</p>
　　　 </div>
　　　 </body>
　　</html>

　　您还可以随意修改颜色值，看看其他的发光效果是怎样的。
　　本节主要讲了Glow属性的应用，下一节将向您介绍Gray属性。

2005-9-27 12:58:40

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 23 楼

五、CSS滤镜

　　7、Gray属性

　　Gray属性把一张图片变成灰度图。它的表达式很简单：

　　Filter：Gray

　　其实这个属性没什么好讲的，只需在您定义的IMG样式中加入一句代码：

　　{Filter：Gray}就一切OK了。
　　下面两幅图分别代表未加Gray属性和添加了Gray属性的效果：

这是原图，点击可放大

转成gray属性后的效果图

　　本节讲述的内容比较简单，下一节将向您介绍Invert转化属性。

2005-9-27 12:59:01

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 24 楼

五、CSS滤镜

　　9、Invert属性

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

　　Filter：Invert

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

　　　　　　　　原图　　　　　　　　　　　　　　　 Invert属性效果图
　　　　　　（点击可放大）　　　　　　　　　　　　　（点击可放大）

　　我们看到Invert属性实际上达到的是一种“底片”的效果。
　　自己拿别的图来试试吧。本节介绍的是Invert属性，下一节将向您介绍Mask属性。

2005-9-27 12:59:18

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 25 楼

五、CSS滤镜

　　10、Mask属性

　　Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单：

　　Filter：Mask（Color=颜色）

　　只有一个Color参数，用来指定使用什么颜色作为掩膜。
　　同样，我们来看一下一幅图片在加上mask属性前后的效果（见下图）：

原　图

Mask属性效果图

　　加上MASK属性的效果就好象是在用有色眼镜看物体一样。上面的效果的代码如下：

<html>
　　　 <head>
　　　 <title> mask filter </title>
　　　 <style>//*设置CSS样式开始*//
　　　 
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <div>
　　　 <p> wenyleaf </p>
　　　 </div>
　　　 </body>
　　</html>

　　其实，您就算在代码中去掉对字体前景色的定义，得到的效果还是一样的。因为有了Mask属性的定义，它遮罩下的字体颜色的设置就已经失去了意义。
　　还有一点需要您注意的地方，mask属性对图片文件的支持还是不够，不能达到应该有的效果。
　　本节讲解了Mask属性的应用，下一节将向您介绍Shadow（阴影）属性。

2005-9-27 12:59:39

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 26 楼

五、CSS滤镜

　　11、Shadow属性

　　Shadow属性可以在指定的方向建立物体的投影。它的表达式是这样的：

　　Filter：Shadow（Color=color，Direction=direction）

　　在这里，Shadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向。
　　这里说的方向与我们在第二节Blur属性中提到的“方向与角度的关系”是一样的。　　也许您会问，前面讲到的Dropshadow属性和Shadow属性有什么不同吗？
　　光说的话，您恐怕还难以理解，让我们看一看分别利用这两个属性做出来的效果有什么不同（见下图）：

　　　　　　　　　Shadow效果　　　　　　　　Dropshadow效果

　　这样一对比，就可以很明显的看出两者的不同。
　　Shadow属性可以在任意角度进行投射阴影，Dropshadow属性实际上是用偏移来定义阴影的。所以，看上去左图的文字和阴影就像是一体的，而右图的文字就像脱离了阴影一样。
　　本例的代码如下：

<html>
　　　<head>
　　　<title> shadow</title>
　　　<style>//*开始设置CSS样式*//
　　　
　　 </style>
　　 </head>
　　 <body>
　　 <div class=“shadow”>//*区域内为Shadow类*//
　　 <p style=“font-family：bailey；font-size：48pt；
　　　　　　　　font-weight：bold；color：#FF9900；”>
　　　 Hongen Online</p>//*定义字体名称、大小、粗细、前景色*//
　　　</div>
　　　<div class=“dropshadow”>//*区域内为Dropshadow类*//
　　　<p style=“font-family：bailey；font-size：48pt；
　　　　　　　　 font-weight：bold；color：#FF9900；”>
　　　 Hongen Online</p>//*定义字体样式与Shadow类的一样*//
　　　</div>
　　　</body>
　　</html>

　　本节讲述了Shadow属性的应用，下一节将向您介绍Wave（波纹）属性。　

2005-9-27 12:59:58

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 27 楼

五、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 样式开始*//
　　　
　　　</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</p>
　　　//*设置字体名称、大小、粗细、颜色*//
　　　</div>
　　　<p><img src=“ss01044.jpg”></p> //*导入图片*// 　　　
　　</body>
　　</html>