DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 利用CSS的Clip屬性來創造多彩文字
利用CSS的Clip屬性來創造多彩文字
編輯:CSS進階教程     

原理

將二個相同而色彩不同的文字重合在一起,通過分別給其加 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>



參考資料:http://www.ibloomstudios.com/article8/

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved