发新话题
打印

CSS滤镜之Glow属性

CSS滤镜之Glow属性


当对一个对象使用“Glow”属性后,这个对象的边缘就会产生类似发光的效果。它的表达式如下:
4 W: k$ e! @7 `
; T; `( L7 o, y( Q" Z6 K  Filter:Glow(Color=color,Strength=strength)   $ Y9 M8 s! r) X9 s; t0 u2 J
; K! z7 n$ f9 ?8 U4 V
  Glow属性的参数只有两个:Color是指定发光的颜色,Strength指定发光的强度,参数值从1到255。 让我们先来看一下加上Glow属性的效果图:  ; e; {& q/ I  }. H- m7 N0 t

6 Q+ F3 T6 |# O6 s% u( W
0 x6 I0 V5 {$ _+ S1 y: U0 h" O! S( G+ M* v7 i# x# v0 Z0 N
  
( C$ n7 O' D9 H- D# a3 K! _8 h! g5 ~6 |; k
  怎么样,是不是有一种燃烧的火焰的感觉。实现这种效果的代码如下:  
) k7 J$ c% ]9 e, H2 V1 Q- a
1 e2 d$ a$ q% O  O0 O+ I  html
6 L# q1 R: @& y7 r# n    head
6 B; V& t$ v$ M" {% }0 o# W. A) [    titlefilter glow/title
  f  L4 b: h% t' T3 D1 j9 ~    style//*开始设置CSS样式*//
; {! r, r  g4 h$ L" I- r    !--
8 l2 s: Q& i6 q4 Y8 D% B    .leaf{position:absolute; top:20; width:400;
- S4 p- S$ `0 I. H       filter:glow(color=#FF3399,strength=15);}
  H% n  I% U& z: W, z$ ^5 b5 m# @    //*设置类leaf,绝对定位,Glow滤镜属性,发光颜色值为#FF3399,强度为
) _5 V1 h' p& S    15*//
) U! v# l4 ]' V    .weny{position:absolute; top:70; left:50; width:300;
4 L5 c) \4 t) p4 D/ }7 g       filter:glow(color=#9966CC,strength=10);} : P0 ^/ d, k, w2 V; a- ~
    //*设置类weny,绝对定位,glow滤镜属性,发光颜色值为#9966CC,强度为
1 F; V: C' D6 {& {; \- H    15*// " N+ X2 ?0 V/ }1 A- L- V# |+ n
    -- " u! v2 i: e) Y% p6 n
    /style 7 P3 \) M' |% n
    /head
* ], r1 t: {! P! O3 F  A    body ( k6 m; ^* s3 n" w: o1 ^
    div class=“leaf”//*leaf类样式*//
6 T! e* {9 P' t0 u* T6 q" u3 F    p style=“font-family:lucida handwriting;
5 q7 v4 h  W/ j& t) B3 d         font-size:54pt;font-weight:bold;color:#003366;”! k$ D: C  y1 \3 u# c
    Leaf Mylove/p//*设置字体名称、大小、粗细、颜色*//
2 R! F7 W+ F8 ^9 L1 D" B    /div
; O: i' V+ m% i. T% e. t    div class=“weny”//*weny类样式*// " N; K. P+ {& a7 y* v' J
    p style=“font-family:bailey; font-size:48pt;
0 q  K+ ]9 y8 `2 J5 T2 A* L! D  x5 H5 P" {         font-weight:bold;color:#99CC66;”
' N1 R  Y5 f0 Q' k  U2 ~( N    //设置字体名称、大小、粗细、颜色*// 2 r4 r& L! N$ n- g( N* n
    Weny Good!/p
; ~8 ?" _2 @' s% Z3 }    /div 8 V& ^3 Z' r$ G. ?7 D& V
    /body
( M  o2 q, ?. D+ N, i  /html  - \! N$ B7 j4 r: b6 w( t6 M# e

+ D7 K3 f! |1 j+ R" S  您还可以随意修改颜色值,看看其他的发光效果是怎样的。



点击图标进入精品网摘收藏 欢迎大家加入网络收藏夹

TOP

发新话题