精通 CSS 滤镜（二）

随着网页设计技术的发展，人们已经不满足于原有的一些HTML标记，而是希望能够为页面添加一些多媒体属性，例如滤镜的和渐变的效果。CSS技术的飞快发展使这些需求成为了现实。从现在开始我要为大家介绍一个新的CSS扩展部分：CSS滤镜属性（Filter Properties)。使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本容器、以及其他一些对象。对于滤镜和渐变效果，前者是基础，因为后者就是滤镜效果的不断变化和演示更替。当滤镜和渐变效果结合到一个基本的SCRIPT小程序中后，网页设计者就可以拥有一个建立动态交互文档的强大工具。也就是CSS FILTER  SCRIPT， 这就说明想要建立动态的文档还要一些SCRIPT （脚本语言）的基础。  
# a, t. @' Z7 J  T
- a, U" z4 `# |$ C( t: f8 b) i0 g" Y& P
7 F9 z2 r' p7 s" a

$ u; n  O# w# V' Z8 x$ D
. a' Q7 B7 c' E1 z6 E# R
0 P$ p6 _8 h. U% p! a& P/ h$ A; a8 t: N! P
正常的图片 img src="flower1.jpg"
# Y  L) t* h' N. q4 T/ V3 k, a( s) y4 i7 l2 ?, l  H
模糊效果处理后的图片，哪个更漂亮，你觉得呢！达到这个效果很容易。仅仅是加了点东东。
* \" ?+ e8 `% t0 h! W1 h/ Dimg src="flower1.jpg" style="filter:blur(strength=50)"
! o5 y1 m  q2 z7 s
5 ?) z+ f& l. N- r+ [+ P% x3 G* T' C4 w% L

. q& T/ K, W0 Y4 W9 B. W) Y  r4 d& B! S- j
$ U& r9 t6 R& H4 F8 V$ o
自己试试，看看有假没有！不要你用什么Photoshop之类的图象软件，简简单单语法如下：3 z+ m8 ~! k( A  Y
filter:filtername(parameters) 既 filter:滤镜名称（参数）  3 O& v( D1 C4 t. O) k# V

6 _% v5 X; S  P) U
+ R* f" t) m, E  S
$ ]* _1 Y* u9 Y' t7 G: f' t+ H' i
  `1 @/ d) A4 V( H8 y2 {
! Q! e; P% U" W( j! V& ]$ M" E3 M, M7 l0 `4 W8 X: G8 N2 o

- i0 B# T* K* G0 j8 ~2 }& D( ?% Z. q
+ u7 F/ m& \( F3 l
8 F" l' `' P, V" r: L

  l" L9 E; c, i3 U0 b
6 s" G- p$ Q2 I9 T9 _% \, `1 \7 |& z, T  k/ z# P7 Y# E; w, ^1 V
　
: W$ x  K* Q) \% [. Z- o# o
; T3 p( w4 h; U　+ J9 b0 h% j( ]& {6 D
# {0 \# J2 H3 ?; m1 [
可视化滤镜属性只能用在HTML控件元素上。所谓的HTML空间元素就是它们在页面上定义了一个矩形空间，浏览器的窗口可以显示这些空间。下面列出了HTML合法的控件和它们的说明。  
, r! |1 N- H! B! i0 K/ e
3 G0 K- l7 C- Z! Y备注：可惜只有IE4.0以上支持，如果是别的浏览器，那就.......  
- f' Q+ K9 u3 v. ]0 a9 a2 E' S5 u. V9 b, o7 i# F

4 b7 U8 L1 ^' T  ^0 _0 K9 ?' E% P2 I# W

- F6 ^( k: _  d5 J: K
: _8 d0 V) r2 q6 s# Z8 V2 w$ e4 _" l; B1 C- S0 d8 j# y
: d- X' K) ^+ l; q4 [# x+ q
元素2 M( n5 v& Y! J, i) i

8 R1 v0 V4 q& p8 r; Q说明+ Y  j! @$ n" x1 r0 p4 B3 _+ i
: u* l' K8 Z2 E1 B' H8 w4 W

' H9 e6 a3 W8 d+ Y  L- R4 a+ `! ?
1 D2 Z# a4 y! |; q- S, v/ kBODY& y# y" O& [( L2 R+ g" B

" o: q! M' p( K- d/ B1 ]网页文档的主体元素，所有的可见范围都在BODY元素内
- d6 d6 X* ^& V. G  x( `7 p& A- A8 s# G
: g4 V, T: L) E

7 [  p! y5 i- X# i+ g$ uBUTTON6 t+ B& Q: u  w1 `; c( i! p
4 {3 l9 a( k0 y3 N$ m0 {, Z
表单域的按钮，可以有“发送(submit)”、“重置(reset)”等形式) F6 p4 P8 S1 h/ P2 n* X2 [
1 v1 i5 t, o4 D5 F

. b( |9 w* c6 Z, x% B; r; A, I  b) ?" ]* O* p& S( ^% N% a/ A
DIV; Z" _, t3 W4 J! c
1 c( K) X9 V3 p! y
定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的* o2 j. k! p" P9 p; F/ j4 O5 C) ]

2 b- f% Q' u# C* R9 [; r" Y# A* f. [& O( Q! e
4 w+ C  R% N- `' P# Z. M' Z
IMG4 B! S7 X- m. s9 p' P

( X& y4 g, ^6 d7 C$ S. J7 P! U图片元素，通过指定“src"属性来指定图片的来源9 G5 \6 d* h1 q$ t
) i9 C' Y) t6 J( c; F7 i9 K
/ S8 z. Y- _% X. _
2 d2 \! d8 z5 f2 T
INPUT4 f6 ^1 X+ Z& u5 ~
6 Z' Q- U$ F1 G& V. ?1 B
输入表单域7 L. \" B" o1 ]4 E- @# o1 u& {( z
# h+ Z" r0 G" o2 B
. `# O+ i$ [2 y; w' _* }1 |

5 B" u3 @0 u& t6 ^* o& A% HMARQUEE
" `4 C/ F! @5 c8 I. J- L3 v/ A
# ?2 [* Z$ P' b7 A( F移动字幕效果
0 @3 L3 x' V1 \' `! z
' s9 m; r5 G. K) N6 q: F+ ~/ r. J7 W) l. |9 T- ]% c

. X% P- [* y" h, u  _# m. ?SPAN  q9 U0 W8 D8 S4 E. j8 F
- a. Z3 v  o: I
定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的! s- \/ g" a! J* E  ]( ~- X

4 @- @! A* U9 O: ?. ?; ~3 U% C
( J" `, @. P. j! w! Q; E1 K3 ]$ ?% f5 b  R$ e; y
TABLE! d1 E# O; I+ x) V' D

! t% M% ^! O! I1 E表格6 C7 j; p& V, f( Y  J" s& e# e

. V9 M; e$ ^2 r8 X% T. a  E6 @
! e8 M, |9 h' G7 ^: X  \1 j: ~8 N
4 `; U" ]0 f2 ]& wTD/ x" p' z5 I" `& a
7 b6 |) X& n: c1 H; R8 _- }
表格数据单元格9 j$ v! l3 K1 Y. o1 d- K) W, L
0 q7 m& w6 j/ n/ b  M4 _/ ]

9 a0 ~7 E6 H6 M/ C  z& D/ @" D4 j9 l$ c2 @
TEXTAREA
1 i; A+ Z: l: W7 p# G8 S
7 k  Y- n. Z3 N% G5 v$ {4 Q# z( z文本区域; G' U% d2 q5 a( w
% a% q* w! I8 r8 y8 z$ G
* y: x0 s/ c) c! w, I

5 B: I! b. O) s5 BTFOOT% b1 o7 J/ U- ?' y

4 o( |* n7 Z4 c3 T: D% i5 a, x0 C0 N多行输入文本框
! g9 b4 i. D6 ?2 D: e0 K
4 |9 {6 g# L& e( \; y  a
4 ~. O* i+ W% z2 _3 S+ J7 ^; g8 p. h
TH! Y0 _( Y. Y2 V) R5 {' S' W6 n

* @; I: Y' d! V1 T表格标题单元格( M) T4 p5 j- Y) Y$ W

5 d1 I% L# z! j3 c$ g8 I: P
" X% m8 h6 S* U8 y- l0 A% k& a: U. {. }0 h' @
THEAD4 t0 z# A5 Q* ?* Q+ v
! v  R3 q% [$ |; _% g- U
表格标题+ i% X; i' ~( s& |* K. v# ~! ^

, \( S7 _5 r4 H" j+ Z7 p  }7 [* X+ J2 M' s% ^* ?; A
1 O& t+ L( p( d9 T
TR
5 s# K- J/ U. H) Z+ D% T2 R% \- G5 ?- I* A, S3 a
表格行
5 [  ]3 w" b  {
  J7 p+ A- j5 z2 GIE4.0以上支持的滤镜属性表  
& [! T3 [6 x2 u
6 U' D8 a4 V% s, `
' e  Q- j2 R# T! f* `* y! N; w3 H3 x: B! p* H
( |6 B# [. y( `* V% D
7 _' }1 Y( C/ U0 Z- Z
% c  \& e: Y: S
+ u# @  a1 H0 I0 C3 W
滤镜效果( D( u- d. g' z" u

8 H6 {( @8 ~9 P  ?# C- f描述. T+ C/ j, ^& L

5 y; m: R9 I/ v% c. f' p; t0 J8 _8 \+ c

2 z6 n8 Q/ I8 ~1 \& r1 `! _Alpha/ i, ^2 g: K* g" M

% R& v. |, [/ B4 G6 o2 @  O设置透明度
# X& @8 b! v) }8 O# |7 [4 }4 o) f5 N, E! R: P3 h- ]- ?3 X6 _

+ J, ^6 e- `9 k+ ?; t, S- I( V7 ~: d# W" q
Blru
! I. D5 q/ M9 H- H, i, [+ F. C+ R+ w3 m/ i- K, j) k( |
建立模糊效果
6 a- \& ]% |0 n1 c- j6 K/ O. ]- K1 m! j2 X/ h
4 w9 j1 k3 G+ Y4 p3 I' ~
: ^% {" h5 \5 G: S
Chroma
& q8 f( k( ~6 _: y; I3 ?* ^
3 b" F* m/ a% h5 o把指定的颜色设置为透明9 Q5 M( Y$ w9 s3 n; T/ r3 ]4 [
$ q  B7 k' h" N- M! @
' P# a* z9 c8 o7 Z* s! _
8 h- j0 b) M$ o% @4 h6 \: z
DropShadow# S6 ^4 z$ A7 c  _
2 L' X9 |6 ~5 q. `$ {) K! b. s
建立一种偏移的影象轮廓，即投射阴影5 U# q2 ~( u9 {; S' Y5 ?- o4 `2 u

. d3 K4 x  q& ]4 X; h  G9 V# w4 f6 R% m! Y7 `4 v( f
' ?5 a' A) {' w: s& M
FlipH* [7 i+ W" @3 x7 i8 i9 \. `% `# ^+ Z
2 s9 m. T) d4 s! H5 U
水平反转
1 F: E: h4 F6 v4 d
, }  j" e- |- A
% a/ Q6 r4 [: @6 ^1 e/ J" u& \7 d3 l) Q& b) ?
FlipV3 V% X6 c/ [6 `. V* G. z
) j2 P, R4 u0 G2 E5 v
垂直反转* L, u: y  E) X/ j4 {* A
8 b( |4 S7 s8 F+ U  M+ Q* @6 Y
  N7 m* e4 M4 E0 P- p8 r
) K' S/ I7 o( [3 h
Glow
% S( U# h; C( K3 g, K7 E" h: h, [; h( q& i% r7 Q# h1 P
为对象的外边界增加光效; E) `6 y$ M) Y

, e+ L- k3 V( z, M# ~- J3 B/ x5 x3 a( |5 J# V8 Z* {7 i2 t+ Q

$ E. N9 w8 o; S/ iGrayscale
  }0 V. M/ d& q' J  ~8 ?  [: ^- p! c8 K% j8 a, J( M" f
降低图片的彩色度
" U$ y9 ^8 x! o/ t, o1 D: w* B! q- M5 x. {7 @

4 P/ W( c' @* s7 e" F
2 m8 g% a4 _& G. c  |3 LInvert, G2 A8 x1 x3 q/ l( U- [
; Y- F! H. |! c1 C6 O  Z
将色彩、饱和度以及亮度值完全反转建立底片效果
1 v5 D" ]- [! p& t# X( ~+ D( @$ |) k9 U. g

% X! r# A% @# f5 F. c- c
7 I4 T: P8 E' Z7 u- r+ KLight
; W0 G' n/ L# K  u& C1 I7 R, d) n) L
在一个对象上进行灯光投影* m7 f7 T/ X0 I7 Y9 q

$ p! {! t# P8 t: b/ m4 B6 U/ q! B1 R9 H+ @8 w2 Y

" i) h! r! ]! T6 W; w) u$ t$ KMask/ x: C; e5 E7 b: b7 d: ]- t5 w3 _
4 x0 u. I! @( H0 d# s1 o
为一个对象建立透明膜3 M  z5 ^0 |- W

$ Z: g6 A- N" P# H
) h* f! J: d- K5 F9 {, M2 x1 O
/ `2 @  ?1 h/ I2 c& l! L, ]6 VShadow) \: u4 x: t' ]3 @- b2 l. @5 @/ [
- p' ]' E+ g8 ^+ k' B9 q" F' G
建立一个对象的固体轮廓，即阴影效果9 ]5 H) T0 k  T
* r; i0 d. O" r, v
8 a2 B, L6 w5 R8 `) e  G, Z; w

; T  m9 `) M( f: a7 c) iWave
% Z+ A3 G6 M/ s  W- K; l( p. C' e9 R- q5 k
在X轴和Y轴方向利用正弦波纹打乱图片2 D7 d7 `9 m1 Z# G: V. W

8 m0 n% N0 H' Y
) n' q$ y: G# x9 T6 o: ?
% {) ~0 z6 Y! X% lXray. {0 Z# t4 P; k1 h/ j, k

& J6 [# T: o; W  |1 y: _; _只显示对象的轮廓) _) ^3 B. e3 e. M' D" H# P0 r
$ U' ?. h0 W' r- J
下面几页我们将详细讲述每种滤镜的使用方法。