用CSS制作彩色文字
网页上的文字和美观的图片相比似乎显得比较单调，因为文字只有颜色、字体、大小等效果。那如何才能让文字更有特点呢？那就让文字变成彩色的吧，不过不是每个文字设置不同的颜色（当然也有这样的，比如google的logo，虽然用的并不是文本，但用文本也可以实现），是文字的上半部分和下半部分颜色不用。先看一下效果吧：
其实这里有两个相同的但颜色不同文本，他们重叠在一起了，一个显示上半部分，一个显示下半部分，合在一起就达到了彩色的效果。
所用到的关键属性是 clip ,此属性 CSS手册上的说明是：
我们一步一步来做。先做上半部分的文字：
XHTML代码：
<a href="#" class="textTop">多彩文字 multicolor</a>
CSS代码：
.textTop{
color:#cc0000;
font-size:24px;
clip:rect(auto auto 15px auto);
position:absolute;
}
color:#cc0000;
font-size:24px;
clip:rect(auto auto 15px auto);
position:absolute;
}
查看效果，效果如下图左边所示。
下半部分：
XHTML代码（除了 class ，其他和上面相同）：
<a href="#" class="textBottom">多彩文字 multicolor</a>
CSS代码：
.textBottom{
color:#3399ff;
font-size:24px;
clip:rect(15px auto auto auto);
position:absolute;
}
color:#3399ff;
font-size:24px;
clip:rect(15px auto auto auto);
position:absolute;
}
查看效果，效果如下图右边所示。
把代码合在一起，就达到了最终的效果：
XHTML代码：
<div class="container">
<a href="#" class="textTop">多彩文字 multicolor</a>
<a href="#" class="textBottom">多彩文字 multicolor</a>
</div>
<a href="#" class="textTop">多彩文字 multicolor</a>
<a href="#" class="textBottom">多彩文字 multicolor</a>
</div>
CSS代码：
.container {
position:relative;
}
.container a{
position:absolute;
font-size:24px;
}
.textTop{
color:#cc0000;
clip:rect(auto auto 15px auto);
}
.textBottom{
color:#3399ff;
clip:rect(15px auto auto auto);
}
position:relative;
}
.container a{
position:absolute;
font-size:24px;
}
.textTop{
color:#cc0000;
clip:rect(auto auto 15px auto);
}
.textBottom{
color:#3399ff;
clip:rect(15px auto auto auto);
}
查看最终效果，最终效果如最上图所示。
