假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。
& O- G1 b k. j4 R( d
先来看一下blur属性的表达式：
% S3 E" |2 z4 ?: @1 A
3 g, n' z8 _; L# [. i4 u: O- W filter：blur（add=add，direction，strength=strength）
2 x9 X5 w& l/ L/ Q1 |3 [) g
" }+ k7 _+ }! d: t# o 我们看到blur属性有三个参数：add、direction、strength。
5 z9 w( |2 Z1 f7 ^/ W" v8 {" J Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。 Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：
( U* I" d( o4 R7 x. L
" u) K- R. @5 @
# a' W/ N& _5 `! ~) h
+ s! d/ g' i2 ]6 s, ~
' y0 R# v2 Y) I: j% E+ c4 C% g$ ?7 _; u8 b; b, Q
Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。
9 ^$ F8 O: A7 K2 |/ E) f
还是看一个例子吧。
6 b* Y& B0 U8 r- c+ v8 H9 f% [( Y
$ x2 U- y {" M g2 g# D- j$ N% f＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
$ q. M3 b9 V9 R2 U1 E
% i3 _ t8 k/ V+ z% Hhtml
2 q& j8 e: l8 a3 C9 U3 T# T9 w/ t
head
: Q! l4 Y0 p$ R3 O% x% V" ]
titleblur css/title
5 ^6 ^$ p1 ^! w/ @
script
+ `0 K! ]. A' q6 x; {) z& D! t( {/ S function handlechange(obj)
; L8 ~& ]5 l; h# l2 K9 l$ u
{
& T- }' Z8 {7 m4 z, a9 d
with(obj.filters(0))
3 d4 _/ n: U# z2 a2 p {
& h! Z: i" Z) r) M
if (strength255)
. J3 Q% K% {5 b9 Y7 ]
{
# x6 ]& W+ c# V4 {
strength =2;
$ f. A) w% `+ a7 w& e" b% {2 a- w5 L direction =45;
0 F# Q# k; k, c- M9 }
}
+ q( k0 x; {3 x
}
/ Q( m9 v h5 a0 M. y0 m3 L5 q$ q }
' g* h: q( f4 z' Z/ r
/script
' b0 \# G |$ o3 y
/head
; S9 n0 U O* {0 p$ ]4 J
9 M r. _$ [" S5 i4 h
body
: {, r/ y3 Y% K6 d: O$ D& r( ]
pimg id ="img1" src="jsimg/1.jpg" style="filter:blur(strength=1)"
+ l, z' C: U h3 L2 I$ G onfilterchange="handlechange(this)"
9 Y0 s9 U$ {+ }. J /p
7 o A3 L9 K7 t: ] ^8 I/body
( z$ e) f& V7 z. k2 V/html
& R5 S. G z0 {
4 V, f8 Q0 X4 |& I" `& |＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 看起来是不是有些像万花筒，在这个例子中加入了一些JavaScript的语句，代码如下：
/ o0 x: i; F P* @0 K, S& c* s# ^4 K; h
: q" `1 `) T/ M$ x; C/ }/ f
html
9 _: z8 n0 ]) [- z head
. T6 Z1 a% e, r1 z
titleblur css/title
" e( }. s/ P2 k4 t" y$ Q' R
script
0 B C! O6 W# D function handlechange(obj)
' D! B7 A: T* Y. y* Z
//*设置一个循环函数handlechange，对象是obj*//
0 j8 q, t4 k7 w1 k7 o- d7 V5 F
{ with(obj.filters(0))//*Obj的filter属性*//
1 Y+ T% R4 r* u, R { if (strength255)//*设置循环条件*//
( F& ^; Y8 E/ F# u8 K' d { strength =1；direction =45；}
) k* T+ H6 d# v) B' ?- a
//*每循环一次strength就加1，direction加45度*//
- @9 s8 l9 A' b( X
}
0 q6 _8 F1 d ~' _2 h- c }
9 W( O G$ c7 s+ l& c" o /script
+ a' |. Z4 B r. v' W/ ] /head
0 G0 s/ R: _8 E$ O body
7 `# N# P$ N( J& V4 U$ W
pimg id =“img1” src=“ss01087.jpg”
0 C+ e9 ]9 q3 c* Q7 G" U
style=“filter：blur(strength=1)”
9 D- u( f/ T6 R/ q8 o C
onfilterchange=“handlechange(this)”
: d# q% J! g6 X) i% F# I3 O8 R
//*导入一幅图片，初始blur属性strength等于1，同时调用onfilterchange函
1 C" m' k: z; Z$ o+ O0 ]/ f 数*//
& @% Y1 u1 {. B& F /p
* J. j2 P# B: J9 W2 N8 S3 Q /body
: s) N4 s0 y' I+ S
/html
7 \7 h$ ?0 S0 W2 d+ n% F% M* b6 ^* H0 V; {% I1 ]
注：在javascript中blur属性是这样定义的：
& u, Q/ [0 A$ {, E$ z
[oBlurfilter=] object.Filters.blur
- r, x5 O- L" j3 p
, W* T0 b; F1 C/ q 这个例子是Blur属性的一个比较复杂的例子，下一节我将向您介绍两个较简单的blur属性效果。
- W2 h2 T: I3 l8 x3 d- `
+ U1 w# g) Z: j通过blur属性还可以设置页面中的字体。如果把字体的blur属性add参数值定义为1，得出来的字体效果是这样的（如下图）：
& S1 @$ E) R" ~7 w+ a) B4 J- i; S
' |" O+ H; V) W3 W
7 U+ R R0 l9 n# y+ s b7 U1 a4 {
+ M' D& `8 ~ [, [' P) k, }6 V
( s+ _) s3 X" ]1 {/ `( Y
8 r7 ]4 n7 p, Q 怎么样，是不是有些印象派的意思，这种效果的实现代码如下：
/ y' s: i4 f. b% `- g
* U6 G7 K* o1 c0 k html
' t9 d( A" M7 V6 q0 g/ m4 O head
% m5 I2 D$ ~4 C' W& e5 p6 `
titlefilter blur/title
4 F& r! k5 n5 \5 q, o1 o style//*CSS样式定义开始*//
' |0 \6 m% |/ E
!--
2 _) u% r% ]/ g7 v0 ~$ p0 P7 G8 j div{width：200；
* I1 q" A1 J9 e3 H filter：blur(add=true,direction=90,strength=25)；}
5 Q$ |& P2 c5 [ //*设置DIV样式，滤镜blur属性*//
$ }( L0 ]3 u/ V2 y+ e' n. g' A8 \
--
2 }/ s, Y6 e! W
/style
" G' m; L8 \: w
/head
( o# G% u: {6 n" D% d, D4 u1 N
body
9 l% D$ z8 _* E1 I* S) H! `1 t
div style=“width:702； height: 288”
# B/ O7 M0 i, _7 w
p style=“font-family:lucida handwirting italic；
$ `# R4 X& O- {" n/ i font-size:72；font-style:bold；color:rgb(55,72,145)；”
8 P; I( z( |9 @9 q: e7 i LEAF/p
+ N6 S, H3 I, e& K) C
//*定义字体名称、大小、样式、前景色*//
5 t# d- c+ ?" V% G$ o/ w0 ^8 p
/div
9 Y. m+ h/ }" Y4 ~ /body
V& N q! @- G- f5 @. P1 @8 q& s
/html
; x/ e; e( N! k" q3 c) h
% Q0 F) l# ?2 T4 ]: d; J, G6 a2 R 我们看到strength设置为25，如果把其值再改大一些，就会达到非常夸张的效果，同时把Direction参数值为180，显示效果如下图：
3 |4 i9 D. O- M2 [! m1 G% t, z7 T
( ~, { S3 w, d( s+ E# G! J
! G M$ b; ?* v( `- Q
, f1 C- d1 M9 P% F3 Q - q. h6 Z7 f( e6 X0 I6 e: F
# o. \5 q# v1 m, @$ r. W" M y7 a9 \2 k 用blur属性设置字体可以达到很多效果，把direction和strength再做修改，还能达到多种效果，您可以自己修改试一试。
