当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > CSS滤镜之Glow属性

HTML/XHTML教程
ie7打开页面有源文件但页面空白问题的解决方法
firefox支持webdings字体的方法
HTML 相对路径和绝对路径区别分析
ie6 失真问题
关闭IE启用图片工具列
HTML5 Canvas 起步(1) - 基本概念
网页表单元素Input的高级用法11例
漂亮样式表在XHTML+CSS网页制作中的应用
html ReadOnly 和 Enabled 区别
如何正确地在XHTML文档中使用JavaScript和CSS
IE6 为什么最多人使用
给网站添加 favicon的技巧 网址前面的小图标
什么是 WML?
WML 标签汇总
HTML相对路径 上级目录及下级目录的写法
html 自定义标签使用实现方法
Firefox下英文字母不换行的解决方案
HTML 文本转义小窍门
设置IE8使用IE7的样式的代码
HTML 标记一定不要忘记关闭

HTML/XHTML教程 中的 CSS滤镜之Glow属性


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 40 ::
收藏到网摘: n/a

当对一个对象使用“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</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>

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