css-clip属性介绍

时间:2015-5-26 19:59:23   作者:互联网   来源:互联网转载   阅读:234   评论:0
内容摘要:  css-clip属性介绍:  Clip属性它必须将position的值设为absolute时,才可以使用的CSS属性,Clip属性对于各大浏览器的兼容性是很好的,它的原理如下: 将二个相同而色彩不同的文字重合在一起通过分别给其加 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替换,即此边不剪切

实例的效果图:
css-clip属性介绍

XHTML代码如下:
 <divid="top">

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

  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;  
 }  
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);  
}  

 width: 28em;  
 height: 5em;  
 margin: 1em auto;  
 position: relative;  
 background: #F6F6F6;  
}  
.textTop:hover {  
 color: #808080;  
}  
.textBottom:hover {  
 color: #FF4646;  

标签:属性 介绍 

免责申明:

站内素材文件均整理自互联网,仅供个人学习参考使用,请勿用于商业用途,如您喜欢请购买正版

站内资源除部分为本站原创外皆由网上搜集和整理,若无意中侵犯到您的权利,敬请告之(QQ:2390986128)敬请告之,我们将在48小时内删除。知识产权声明】【★下载说明★】

全站地图