多彩文字(Multi Colored Text)的制作 Clip属性

　　
　　多彩文字(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; 
第 1 2 页