样式表全接触（7）

网系我情

版主

Rank: 7 Rank: 7 Rank: 7

1^# 大中小发表于 2007-6-23 08:42 只看该作者

样式表全接触（7）

八、滤镜的参数及其作用
. P# a6 o. h" a  Z6 ?4 A
１、Alpha 滤镜 ( c. _5 _5 [+ F1 P
6 I: M' J( |2 H- X) a+ |* r
　　语法：{FILTER：ALPHA(opacity=属性值１,finishopacity=属性值２,style=属性值３,startx=属性值４,starty=属性值５,finishx=属性值６,finishy=属性值７)}
% x, ^4 _, ?- d2 d! y
　　作用：该滤镜能够使对象呈现渐变半透明效果，其效果是由小括号中的各属性名及其对应的属性值决定。 " ~6 A4 Y8 g0 R# [5 f, ~7 J
6 g  {4 I. C4 _" d3 X( C/ w" Q
　　参数：Opacity 属性是设置不透明的程度，用百分比表示其属性值，大小是从0到100，0表是完全透明，100表示完全不透明。
. ~- P  T7 S+ g$ t
　　FinishOpacity 属性是一个同Opacity一起使用的选择性的参数，当同时设定Opacity和FinishOpacity时，可以制作出透明渐进的效果；其属性值也是从0到100，0表是完全透明，100表示完全不透明。
# ~* E& U' k* |* W0 i; D
　　Style属性是用来设置渐变风格的，当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用来指定渐进的显示形状，０代表均匀渐进；１代表线形渐进；２代表放射渐进；３代表直角渐进。 ( Y( O- d. y6 K0 l! ?
* f1 J& [- }; p, h5 n
　　StartX 属性是用来设置水平方向渐进的起始位置。
5 p( V! W# i4 H" J0 c0 c5 S
　　FinishX属性是用来设置水平方向渐进的结束位置。 7 g6 \  x, v. L+ d+ |$ o3 k

　　FinishY属性是用来设置竖直方向渐进的结束位置。 2 l* L# V7 A$ }5 m* S0 r
$ `  Q0 R4 m& ]" V0 s- E' W
　　实例：

html
  ^% I' k9 `; o
head
( E% v$ y. o! d/ o! z
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
5 }3 S/ B5 ^+ }- e4 ^8 N' W
meta name="GENERATOR" content="Microsoft FrontPage 4.0"

meta name="ProgId" content="FrontPage.Editor.Document" 1 {/ |$ X) g! z$ _. b) l0 A# d$ b

title样式表滤镜实例/title

style

!-- + ]( I( O! a. f  l8 b1 S7 T: c# P  z
: E+ X! [1 R. \9 C
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }p {filter:alpha(opacity=80,style=0,starX=2,finishX=4);} ( c  e% D3 H( @. t5 o2 X. R3 m
* r5 Q3 X2 m( d, G8 @2 r* w9 B. ?
--

/style

/head
% a4 T7 @0 }) t  e. }
body

p样式表滤镜实例/p 7 K2 T7 `% D$ S( ~7 R; R

/body
- ?3 l. Q  m6 {  ]" d* c5 n3 B- X
/html : }$ v; U1 v4 y" u

２、ＢＬＵＲ滤镜 : }" c  Z) U* ^% ]- ]# C
0 Q: F8 K* I$ X6 S1 @( x* T
　　语法：{filter:blur(add=属性值１,direction=属性值２,strength=属性值３)；} & A9 y6 @- Y: m4 J( W( Q* t

　　作用：该滤镜能够使对象表现一种模糊的效果，其效果是由小括号中的各属性名及其对应的属性值决定。 ; o# j; F% @3 M
8 z7 }- Q1 C- Z. P! E
　　参数：add属性是用来确定是否在运动模糊中使用原有目标，其属性值有０和１两种，０属性值意思是在模糊运动中不使用原有目标，大多数情况下适用于图象；１属性值代表在模糊运动中使用原有目标，大多数情况下适用于文本。 ) y" `) V# G) `9 i. u6 y

　　direction属性是用来表示模糊移动时的角度，其属性值为０到３６０度。 * q4 i/ E$ S. c5 L) {' a
% ?5 B; {  i' H# s; g/ B
　　strength属性是用来表示模糊移动时的距离，该属性值一般可以任意设置。 $ H1 v" k- K0 V6 R
! \  \" Y6 `! f, {- A" N1 @9 c) E
　　实例： " m/ g% d  @% p' c# j$ K9 u& l1 B

html : q* O. W/ i5 j( v' h$ w3 H

head
9 L0 k5 _5 `4 h
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
+ K9 N9 Z7 W) l" f
meta name="GENERATOR" content="Microsoft FrontPage 4.0"
3 K& d0 ~" g+ x3 w# h+ r2 P) I
meta name="ProgId" content="FrontPage.Editor.Document" ' ?, v1 S. F- r0 J* W* N
9 I8 h; Y4 o; s7 `
title样式表滤镜实例/title

style 9 A: p' G" N2 f( Z3 P, a4 Y
+ V: K9 l6 _- T, S, j# S
!-- , t2 R. F( A) |3 r- N: M

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold } 3 J. K* ]. W9 g) A5 p  D4 J

p {filter:blur(add=1,direction=60,strength=2);}
! d+ f+ V: Q2 }: z1 t8 D
--

/style 8 {( A2 B% r# ^% O
# g" i2 o) X& [/ f& F) J
/head & N  J3 u- A9 b. L8 a6 H& F" q

body ! ?  Z# a0 a& S+ A: U2 F6 x( @

p样式表滤镜实例/p 8 \7 V/ ~# Q9 m3 I4 C, `' }4 T

/body

/html
2 K+ |- ~3 `( Q" J3 U3 J6 V4 G
３、DropShadow 滤镜　 " Q0 @* x' \  F
; ]' g9 S6 Q- J; u  a5 g  h
　　语法：{filter:dropshadow(color=属性值１,offx=属性值２,offy=属性值３,positive=属性值４)；}

　　作用：该滤镜主要是用来产生重叠效果的，其效果是由小括号中的各属性名及其对应的属性值来产生的。
7 g: ?0 p5 z- T. t; m. v
　　参数：ＣＯＬＯＲ属性是用来设置投影文字的颜色。

　　offＸ属性是代表投影文字与原文字之间水平方向上的偏移量。

　　offＹ属性是代表投影文字与原文字之间垂直方向上的偏移量。 $ F6 F) Y+ s6 H
# R8 m' ?8 e- S7 c6 Q
　　positive属性是一个布尔值（０或者１），如果为"TRUE（非0）"，那么就为任何的非透明像素建立可见的投影；如果为"FASLE（0）"，那么就为透明的像素部分建立透明效果。 - X/ r3 H: k, H) y  J/ R+ }, T0 O4 C, P

　　实例： , K# r4 t3 ]+ s2 f
4 T! v9 u* M1 U- x
html
, n# _' J' l$ V0 V+ {' B+ ~
head . K; \0 L/ p6 W% q. w% m
) ?. @6 d" d5 W) x4 W7 e/ P) t" b, h
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
9 S/ I5 M2 W( s; l' ]
meta name="GENERATOR" content="Microsoft FrontPage 4.0"

meta name="ProgId" content="FrontPage.Editor.Document" 2 t* b$ T) B7 P1 h4 M; m5 ~6 F

title样式表滤镜实例/title . |6 R" D5 C9 d7 X
9 Z: i3 A- g' {: C) Y; I
style ( b' t* E, ^" Y4 L

!-- 4 m& ^# E! F4 b$ J
% `6 b/ W" a; v& ~  Y! T
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }

p {filter:dropshadow(color=#ff0080,offX=2,offY=2,positive=0);color:#00ff11} : F' q. {. J1 l8 K! f8 w
/ T1 ?( O) W# ~% P
--

/style

/head 8 }- A. u  t0 d8 @2 h
/ n$ }* l1 q. F( C" C
body
+ p# O/ D$ `* Q; Q
p样式表滤镜实例/p
0 v2 {" x" b' g" W% e% o
/body
" ?4 j' o6 }2 x8 b( b# C
/html
+ P# a0 D, z  P6 ^# D% i, D
４、Glow 滤镜 ; p$ V8 U2 `0 A* ~
& Q) n% \. L* m1 f
　　语法：{filter:glow(color=属性值１,strength＝属性值２)；}
: v5 d% O6 {/ `( b5 S" B$ V
　　作用：该滤镜能够在原对象周围产生一种类似发光的效果，其具体效果是由小括号中的各属性名及其对应的属性值来产生的。
7 S9 }3 A7 @4 M. x3 ?7 m+ c
　参数：COLOR属性是指定发光的颜色。

　　STRENGTH则是发光强度的表现，也指光晕的厚度；其大小可以从1到255之间的任何整数来指定这个强度。 5 h5 t; _4 A: B5 a

　　实例：

html
. t/ s$ ~' H1 l( P+ j  Z' p
head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" , ~  O3 B1 R. ^+ t. K$ u( Y

meta name="GENERATOR" content="Microsoft FrontPage 4.0"
# o, y- w8 g1 Z+ @, v0 E
meta name="ProgId" content="FrontPage.Editor.Document"

title样式表滤镜实例/title

style 5 n) c8 h4 `. e3 C) a2 O

!--
. L* b% N5 r- A# {8 V+ V
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }    X$ L1 ~5 @! I6 o6 a
5 e. @# l3 J5 _3 P
p {filter:glow(color=#880088,strength=3);}
5 {# k# n$ z5 F7 C
--
' m- h, B# k3 B9 s! x9 W$ u& h
/style : N' ^* {  N3 Y1 F  R
% J* j! D5 z9 e* A' O5 Q
/head 6 k7 N- X# E2 t0 U  F; p1 i
3 ?0 K! P% a4 y$ P( L2 M) z
body 3 x$ [* L* }. j4 [9 ]. P

p样式表滤镜实例/p
' o" H. B7 V! B1 _/ e5 M
/body    ?  q" A9 P" K+ [5 a
! k+ P4 R8 A: q5 e6 Y. x/ r8 P
/html
+ N0 U1 ]7 U! F. u
５、Chroma 滤镜 4 j; J! s% ]0 K: s

　　语法：{filter:chroma(color=属性值)；} 8 y0 x5 Z3 Y/ b9 ]$ p* A

　　作用：该滤镜能够使图像中的某一颜色变成透明色。 1 H: \7 b7 S! \/ Z
0 h* }" P2 B2 c+ p8 f
　　参数： COLOR属性用来指定要变为透明色的颜色，通过该属性值的设定，我们可以来过滤某图象中的指定颜色。
4 E) k$ E& T0 `, s- u# v. R
　　实例： 4 B& A" c9 z; T2 `; J- u! l8 t

html + n3 J; k9 G/ W
, y0 }- d, O8 T2 ^( e: g
head , q1 y- c4 f* b/ E

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

meta name="GENERATOR" content="Microsoft FrontPage 4.0" , q* u! y! D9 E8 ]( X
0 R5 S( Q, F4 N  W( p8 K1 b; |- N
meta name="ProgId" content="FrontPage.Editor.Document" 2 f( }6 J) X* c& A4 V3 _5 B

title样式表滤镜实例/title 1 l6 l' t: m6 P+ w5 K4 N+ e" u

style / v0 F8 v9 v3 e0 @. J
& Z  J! x; S) Y- W8 a9 |
!-- ' M3 S6 v( U% O9 {) q- X

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }
5 f2 y" j2 F3 v, t( ]; G
p {filter:chroma(color=#0000fe)；} / E. Y- \2 T4 J6 P& I
4 [" ?  z2 _5 c& S* ^' k, @
--
2 u9 F& G4 R* t/ b. n
/style
% m4 S$ {  p$ @# k& O/ y
/head

body
6 ^  o! D: _. |# J+ E" m6 {
p样式表滤镜实例/p 2 J% M2 v+ s8 [
/ f6 W% t( M$ T0 w/ Z
/body
) l- \# A( W6 q
/html

６、FlipH　滤镜

　　语法：{filter:filph} 3 v- A; A& ?; `1 o+ n* w, u. b! F
4 j% R2 Q6 Y5 z  J0 G
　　作用：该滤镜能够使ＨＴＭＬ对象进行左右对换，一般适用于图象对象。
/ }- u4 w" L. V
　　参数：该滤镜没有参数。

７、FlipＶ　滤镜
$ e2 e) D) n% a
　　语法：{filter:filpv} 2 @* Z2 G* F# n3 Y: S+ Y

　　作用：该滤镜能够使ＨＴＭＬ对象进行上下对换，一般适用于图象对象。

　　参数：该滤镜没有参数。
( U: P% T1 w$ Z
８、Wave 滤镜

　　语法：{filter:wave(add=属性值１,freq=属性值２,lightstrength=属性值３,phase=属性值４,strength=属性值５)；} 6 f% A3 J# q' ?! x7 @* w- ~
& F5 T6 m' v+ |* }
　　作用：该滤镜能够使被过滤对象生成正弦波形，从而能造成一种变形幻觉，其具体效果是由小括号中的各属性名及其对应的属性值来产生的，一般适用于图象对象。

　　参数：add属性是一个布尔值，它用来决定是否将原始图象加入最后的效果之中。
, w' p1 |5 t" m' _# ~* b. `
　　freq属性是指波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹。

　　phase属性是用来设置正弦波的偏移量，也就是决定波形的形状，其属性值的取值范围为从０到３６０度。

　　lightstrength属性可以对于波纹增强光影的效果，其取值范围为从0到100。

　　strength属性是用来决定波形振幅的大小。

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

TOP

‹‹ 上一主题 | 下一主题 ››

样 式 表 全 接 触（7）

样 式 表 全 接 触（7）

样式表全接触（7）

样式表全接触（7）