多彩文字(MultiColoredText)的制作Clip属性_CSS教程

教程Tag：暂无Tag,欢迎添加,赚取U币!

　　
　　多彩文字(Multi Colored Text)的制作的原理是，将二个文字相同而色彩不同的文字重合在一起，通过分别给元素加 clip 属性，使上面和下面的文字被剪切位置不同，设置不同的色彩，从而产生多彩文字的效果，即Multi Colored Text。
　　clip 属性：

示例代码 [www.mb5u.com]

　　clip : auto | rect ( number number number number )
　　参数：
　　auto：对象无剪切
　　rect ( number number number number ) :
　　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切
　　说明：
　　检索或设置对象的可视区域。区域外的部分是透明的。
　　必须将position的值设为absolute，此属性方可使用。

CSS代码：（具体内容请看运行代码）

示例代码 [www.mb5u.com]

.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代码：（具体内容请看运行代码）

示例代码 [www.mb5u.com]

<div class="container">
<a href="#" class="textTop">welcome to mb5u.com</a>
<a href="#" class="textBottom">welcome to mb5u.com</a>
</div>

查看运行效果：

代码调试框 [www.mb5u.com]

<!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.mb5u.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="/tz.php?url=www.mb5u.com/" class="textTop">welcome to mb5u.com </div>
  <p>文字的上半部分</p>
  <div class="container"> <a href="/tz.php?url=www.mb5u.com/" class="textBottom">welcome to mb5u.com </div>
  <p>文字的下半部分</p>
  <div class="container"> <a href="/tz.php?url=www.mb5u.com/" class="textTop">welcome to mb5u.com <a href="/tz.php?url=www.mb5u.com/" class="textBottom">welcome to mb5u.com </div>
  <p>二组文字重合的效果</p>
</div>
</body>
</html>

[ 可先修改部分代码再运行查看效果 ]