查看完整版本: 利用CSS的Clip属性来创造多彩文字

利用CSS的Clip属性来创造多彩文字

　　原理
)SG!Z4jf/} ;{9N3hT\(t2{](h
　　将二个相同而色彩不同的文字重合在一起，通过分别给其加 clip 属性，使上面和下面的文字被剪切位置不同，从而产生二种不同的色彩。[code]clip : auto | rect ( number number number number ) J*H:zlYpR+R!I
参数:
8re F1D/E4S auto : 　对象无剪切 @2Ha;V8HX2b
rect ( number number number number ) :
q2{v[6nOnE;j*PZ;g 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切
)]&ltnp*j4C+B 说明： t_%B*~E"j Bo
检索或设置对象的可视区域。区域外的部分是透明的。
e?ycl3D!ug 必须将position的值设为absolute，此属性方可使用。[/code]　测试环境
$p5B^2v!YDY +SML~9xc
　　Firefox1.5、IE6.0、Opera8.5、IE5.01绿色版通过。
/z3P@b$S%wqf N7Z ?B9p#uS
　　CSS[code]　　.textBottom { bKmRu z w-i
　　color: #333333;
Uc;b(w&UD7u 　　position: absolute;
;D9_Bi3]!pG 　　left: 3em;
j{qg+J.Z 　　top: 1em; )i(?$X3b.mQ5trsc
　　font: 26px Century Gothic,Arial, Helvetica, sans-serif;
jr-PQ
B:t+M} 　　clip: rect(18px auto auto auto); 'fU~[9^
X
　　}
)m-Y'R@3A$g:o z0v 　　.textTop { lG4N:n
]0m#I+s9}
　　color: #CC0000; 8w
q'`1gv&IEnz
　　position: absolute; ^$gL*O g:u&n
　　left: 3em;
Yo ^t&}z 　　top: 1em;
cqg}e4[#v+o 　　font: 26px Century Gothic,Arial, Helvetica, sans-serif; Bi(Zjr'Q
　　clip: rect(0 auto 18px 0);
Vii.V|X[)E 　　} H1gZ!Z-b2x F
　　.container {
:|l#gV"B%gb,[)C'^ 　　width: 28em;
%[D,d@:F WXhk 　　height: 5em;
%E&NQd@H 　　margin: 1em auto; ]@@ss
　　position: relative;
aT'b BTdjx3M 　　background: #F6F6F6; 0z[.U7Y2u?_7a
　　}[/code]xhtml[code]<div class="container"> ` yqo(R pw$lJ{r.h
<a href="#" class="textTop">Cascading Style Sheet </a>
@,Cq2M*{$T <a href="#" class="textBottom">Cascading Style Sheet </a>
"|L?| tb?{&b </div>[/code]