首頁 > 開發者 > CSS

執行個體：利用樣式CSS的Clip屬性製作多彩文字

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
css

　　多彩文字(Multi Colored Text)的製作的原理是，將二個文字相同而色彩不同的文字重合在一起，通過分別給元素加 clip 屬性，使上面和下面的文字被剪下位置不同，設定不同的色彩，從而產生多彩文字的效果，即Multi Colored Text。

　　clip 屬性：

　　clip : auto | rect ( number number number number )

　　參數：

　　auto：對象無剪下

　　rect ( number number number number ) :

　　依據上-右-下-左的順序提供自對象左上方為(0,0)座標計算的四個位移數值，其中任一數值都可用auto替換，即此邊不剪下

　　說明：

　　檢索或設定對象的可視地區。地區外的部分是透明的。

　　必須將position的值設為absolute，此屬性方可使用。

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">welcome to webjx.com</a>
 <a href="#" class="textBottom">welcome to webjx.com</a>
</div>

查看運行效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.webjx.com</title><style type="text/css"><!-- body{ background: #FFFFFF; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 100%; line-height: 140%; text-align: center; padding: 0; margin: 0;}p{ margin: 0; text-aglin: center; }address{ font-size: 75%; }body,html{ height: 100%; }* html, * html body{ overflow: hidden;}#top{ min-height: 90%; overflow: auto; }* html #top{ height: 90%;}a{ text-decoration: none;}.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;}.textTop:hover { color: #808080;}.textBottom:hover { color: #FF4646;}--></style></head><body><div id="top"> <div class="container"> <a href="http://www.webjx.com/" class="textTop">welcome to webjx.com</a> </div> <p>文字的上半部分</p> <div class="container"> <a href="http://www.webjx.com/" class="textBottom">welcome to webjx.com</a> </div> <p>文字的下半部分</p> <div class="container"> <a href="http://www.webjx.com/" class="textTop">welcome to webjx.com</a> <a href="http://www.webjx.com/" class="textBottom">welcome to webjx.com</a> </div> <p>二組文字重合的效果</p></div></body></html>

    [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More