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

日期：2007年7月12日作者：查看:[大字体中字体小字体]

原理

将二个相同而色彩不同的文字重合在一起，通过分别给其加 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>

<!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"> <address> Design by <a href="http://www.forest53.com">forestgan</a> 本演示采用<a href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途。 </address> </div> <script src="http://www.Google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/Javascript"> _uacct = "UA-152060-1"; urchinTracker(); </script> <noscript>google-analytics</noscript> <script src="http://www.forest53.com/stat/mystat.asp?siteid=1" type="text/javascript"></script> <noscript>stat.</noscript> <script language="Javascript"> var now = new Date(); document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> </noscript> </body> </html>
[1] [2] 下一页
利用CSS的Clip属性来创造多彩文字相关文章：
·利用CSS的Clip属性来创造多彩文字
利用CSS的Clip属性来创造多彩文字相关软件

上一篇:把XHTML／CSS页面转换成为打印机页面

下一篇:HTML结构化：DIV＋CSS网页布局入门指南

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

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

原理

clip : 摘自苏沈小雨Css手册

测试环境

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

精品推荐

热点TOP10

特别推荐

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

原理

clip : 摘自苏沈小雨Css手册

测试环境

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

精品推荐

热点TOP10

特别推荐

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