多彩文字的制作，纯css

多彩文字(Multi Colored Text)的制作的原理是，将二个文字相同而色彩不同的文字重合在一起，通过分别给元素加 clip 属性，使上面和下面的文字被剪切位置不同，设置不同的色彩，从而产生多彩文字的效果，即Multi Colored Text。
　　clip 属性：
clip : auto | rect ( number number number number ) 
　　参数： 
　　auto：对象无剪切
　　rect ( number number number number ) : 
　　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切 
　　说明： 
　　检索或设置对象的可视区域。区域外的部分是透明的。
　　必须将position的值设为absolute，此属性方可使用。

 css代码：

.textBottom { 
    color: #333333; 
    position: absolute; 
    left: 3em; 
    top: 1em; 
    font: 26px Century Gothic,Arial, Helvetica, sans-serif; 
    clip: rect(18px auto auto auto); 
} 

.textTop { 
    color: #CC0000; 
    position: absolute; 
    left: 3em; 
    top: 1em; 
    font: 26px Century Gothic,Arial, Helvetica, sans-serif; 
    clip: rect(0 auto 18px 0); 
} 

.container { 
    width: 28em; 
    height: 5em; 
    margin: 1em auto; 
    position: relative; 
    background: #F6F6F6; 
}

html代码：

<div class="container"> 
 <a href="#" class="textTop">welcome to 52css.com</a> 
 <a href="#" class="textBottom">welcome to 52css.com</a> 
</div>

运行代码      http://bluebar.blogbus.com/files/11832119820.html