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

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

　　原理 z2a"_UDPC Y
,o8fr+~s:H)ns
　　将二个相同而色彩不同的文字重合在一起，通过分别给其加 clip 属性，使上面和下面的文字被剪切位置不同，从而产生二种不同的色彩。[code]clip : auto | rect ( number number number number ) +@9FCwZu
参数:
ub;Z(yb'M auto : 　对象无剪切
5pMwR8F} rect ( number number number number ) : 0R oO4DT)K_/a.I
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切
(Kj'[@,d)S4IC w.K 说明：
voCM^Uu9u 检索或设置对象的可视区域。区域外的部分是透明的。 O@Ig-~!T _
必须将position的值设为absolute，此属性方可使用。[/code]　测试环境)GF!n0R xU)b
({R)kLO7Ep O Y
　　Firefox1.5、IE6.0、Opera8.5、IE5.01绿色版通过。
&f J
A-f\ER8uB]L
?5L-U k(Z}+Iv 　　CSS[code]　　.textBottom {
~W7zo8w AJ 　　color: #333333;
I2B(a-YFI0y3a 　　position: absolute; |-M
}2Hnej
　　left: 3em;
2S$Z9D,K[ 　　top: 1em; [#QEj8a
　　font: 26px Century Gothic,Arial, Helvetica, sans-serif;
M[^6q$x+{)\C 　　clip: rect(18px auto auto auto);
i.|p2s{t8E 　　} H uzd*[,Ck
　　.textTop {
lo(E9FZ)g?@)c 　　color: #CC0000; po.G\,^6]$gR~#A
　　position: absolute; nn*r+^x9[2]6^5{
m
　　left: 3em;
f8a2l&tp7s 　　top: 1em;
z&a(^DK*c 　　font: 26px Century Gothic,Arial, Helvetica, sans-serif; /t%G~'HJ&e
　　clip: rect(0 auto 18px 0);
TOc)CFy'g B4m'F 　　} B?7AF#[5g
　　.container { !xZ,ow0]
　　width: 28em;
m!Z,U1iY Y d/E"`c 　　height: 5em;
Z|VR&K%s
　　margin: 1em auto; F v\"d#X8W
　　position: relative;
4YgF9nfV^:h 　　background: #F6F6F6; ']Z*J O1W;go C
　　}[/code]xhtml[code]<div class="container"> 8x l`"Q m6?Im-oo
<a href="#" class="textTop">Cascading Style Sheet </a> p7X p*_KbD9y9^0m"i
<a href="#" class="textBottom">Cascading Style Sheet </a> *?.[G D[
</div>[/code]