css-clip属性介绍

css-clip属性介绍：

    Clip属性它必须将position的值设为absolute时，才可以使用的CSS属性，Clip属性对于各大浏览器的兼容性是很好的，它的原理如下：
     将二个相同而色彩不同的文字重合在一起通过分别给其加 clip 属性，使上面和下面的文字被剪切位置不同，从而产生二种不同的色彩。这段定义的确是让初学的朋友们很难理解，不过学者IT吧说一下它的用法及实例，你们就会清楚了。
     用法： clip:auto | rect(number number number number);
                  auto : 　对象无剪切
                  rect(number number number number）：依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切

实例的效果图：


XHTML代码如下：
 <div id="top"> 

  <div class="container"> <a href="#" class="textTop">学者IT吧</a> 
<a href="#" class="textBottom">学者IT吧 </a> </div> 
  <p>二组文字重合的效果</p> 
</div> 

CSS代码如下：
 body{  

1.     background: #FFFFFF;  
2.  color: #333333;  
3.  font-family: Arial, Helvetica, sans-serif;  
4.  font-size: 100%;  
5.  line-height: 140%;  
6.  text-align: center;  
7.  padding: 0;  
8.  margin: 0;  
9. }  
10.  
11. p{  
12.     margin: 0;  
13.  }  
14.  
15. body,html{  
16.  height: 100%;   
17. }  
18. * html, * html body{  
19.  overflow: hidden;  
20. }  
21.  
22. #top{  
23.  min-height: 90%;   
24.  overflow: auto;   
25. }  
26.  
27. * html #top{  
28.  height: 90%;  
29. }  
30.    
31. a{  
32.  text-decoration: none;  
33. }  
34.  
35. .textBottom {  
36.  color: #333333;  
37.  position: absolute;  
38.  left: 3em;  
39.  top: 1em;  
40.  font: 26px "Century Gothic",Arial, Helvetica, sans-serif;  
41.  clip: rect(18px auto auto auto);  
42. }  
43.  
44. .textTop {  
45.  color: #CC0000;  
46.  position: absolute;  
47.  left: 3em;  
48.  top: 1em;  
49.  font: 26px "Century Gothic",Arial, Helvetica, sans-serif;  
50.  clip: rect(0 auto 18px 0);  
51. }  
52.  
53. .container {  
54.  width: 28em;  
55.  height: 5em;  
56.  margin: 1em auto;  
57.  position: relative;  
58.  background: #F6F6F6;  
59. }  
60.  
61. .textTop:hover {  
62.  color: #808080;  
63. }  
64.  
65. .textBottom:hover {  
66.  color: #FF4646;  
67. }