本节内容：
使用css clip属性制作彩色文字效果。
首先，熟悉下css的裁切属性clip。
所谓裁切就是将具有该属性的元素区域定义出一个剪裁过的矩形，在此矩形内的内容才可见，出了此矩形的内容和overflow:hidden;（溢出隐藏）的效果是相同的。
用clip属性制作彩色文字主要是通过clip:rect (top, right, bottom, left)来实现，其中上右下左分别是按照四个方向设定的数值，比如clip: rect(0 0 18px 0);。
clip除了rect (top, right, bottom, left)这个值外，还有另一个值，即auto，它就代表无裁切效果。
彩色文字的原理就是让两排不同颜色的文字重合在一起，通过使用clip属性，分别将文字的上下部分进行裁切，从而达到彩色效果。
学习下制作原理和方法。
首先， 采用文字相对值em作为单位，设置页面文字大小为12像素左右，方法为：
然后设置一个div作为容器，让它居中显示，背景为灰色，最重要的是让它的定位方式为相对定位，这样才能方便文字的定位。
接下来，两个相同文字的样式和定位，第一行和第二行文字除了字体颜色和裁切的位置需要区分，其它定义是完全一样的，所以可以将它们一次同时定义好：
文字的绝对定位是必不可少的，这样才能让它们重合，white-space:nowrap;的作用是不让文字折行显示。
开始定义它们各自的颜色和裁切位置：
上面一行文字颜色为#CC0000，裁切值按照上右下左的顺序为：上，无裁切；右，无裁切；下，裁切18像素；左，无裁切;
下面一行文字为#333333，裁切值按照上右下左的顺序为：上，裁切18像素；右，无裁切；下，无裁切；左，无裁切;
然后，再把html代码加入到页面中：