用CSS的Clip屬性創造多彩文字

原理

將二個相同而色彩不同的文字重合在一起，通過分別給其加 clip 屬性，使上面和下面的文字被剪下位置不同，從而產生二種不同的色彩。

clip : 摘自蘇沈小雨CSS手冊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>