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

新客网 XKER.COM 2007-12-10 来源：收藏本文

　原理

　　将二个相同而色彩不同的文字重合在一起，通过分别给其加 clip 属性，使上面和下面的文字被剪切位置不同，从而产生二种不同的色彩。

以下是引用片段：
clip : auto | rect ( number number number number )
参数:
auto : 　对象无剪切
rect ( number number number number ) :
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切
说明：
检索或设置对象的可视区域。区域外的部分是透明的。
必须将position的值设为absolute，此属性方可使用。

　　测试环境

　　Firefox1.5、IE6.0、Opera8.5、IE5.01绿色版通过。

　　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;
　　}

　　xhtml

以下是引用片段：
<div class="container">
<a href="#" class="textTop">Cascading Style Sheet </a>
<a href="#" class="textBottom">Cascading Style Sheet </a>
</div>

上一篇：导航上用CSS标志当前页效果的实现下一篇：CSS技巧：word-wrap同word-break的区别

【收藏】【评论】【推荐】【投稿】【打印】【关闭】