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

浏览数：48 / 时间：2015年06月09日

<!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="多彩文字,Multi Colored Text" />
    <meta http-equiv="Description" content="利用CSS 的 Clip 属性来创造 多彩文字(Multi Colored Text)" />
    <meta content="all" name="robots" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta name="author" content="forestgan" />
    <meta name="copyright" content="forestgan" />
    <title>多彩文字(Multi Colored Text)|石家庄感应门|石家庄展柜厂</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;
    }
    address{
    font-size: 75%;
    }
    body,html{
    height: 100%;
    }
    * html, * html body{
    overflow: hidden;
    }
    #top{
    min-height: 90%;
    overflow: auto;
    }
    * html #top{
    height: 90%;
    }
    #footer{
    height: 10%;
    background: #CC0000;
    color: #FFFFFF;
    }
    address{
    padding-top: 1em;
    font-style: normal;
    }
    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 lang="en">
    <div id="top">
    <div class="container"> <a href="#" class="textTop">Cascading Style Sheet </a> </div>
    <p>文字的上半部分</p>
    <div class="container"> <a href="#" class="textBottom">Cascading Style Sheet </a> </div>
    <p>文字的下半部分</p>
    <div class="container"> <a href="#" class="textTop">Cascading Style Sheet </a> <a href="#" class="textBottom">Cascading Style Sheet </a> </div>
    <p>二组文字重合的效果</p>
    </div>
    <div id="footer">

    </div>
    </body>
    </html>