///pc/img/blank.gif" width="12" height="8">当前位置：///default.htm" class="under">亿度网络 -> ///pc/index.htm" class="under">网页制作教程 -> CSS教程

CSS教程 ///pc/img/title_00.gif" width="13" height="20">  

　→ CSS快速入门
　→ 怎样编写CSS
　→ CSS属性
　→ CSS定位
　→ CSS滤镜
　　 1.概述
　　 2.Alpha属性
　　 3.Blur属性
　　 4.Chroma属性
　　 5.Dropshadow属性
　　 6.Fliph、Fliv属性
　　 7.Gray属性
　　 8.Glow属性
　　 9.Invert属性

/pc/bin/msg.pl?file_id=k_css target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法

 

///pc/img/blank.gif" width="1" height="1">

 


五、CSS滤镜

   

　　8、Glow属性

　　当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果。它的表达式如下：

　　Filter：Glow（Color=color，Strength=strength）

　　Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。 让我们先来看一下加上Glow属性的效果图：

///pc/homepage/css/img/css041.gif" width="314" height="205" border="0" alt="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</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属性。

上一节　下一节   

 

/pc/bin/msg.pl?file_id=k_css target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法

 

 

网页制作 网页设计 网站建设 网站设计 网站制作 做网站 做网页