您的位置：首页 → 网页设计 → HTML/CSS  → css-clip属性介绍

css-clip属性介绍

时间：2010/2/11 11:03:00来源：本站整理作者：我要评论(0)

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代码如下：
 <div id="top"> 

  1.   <div class="container"> <a href="#" class="textTop">学者IT吧</a> 
    <a href="#" class="textBottom">学者IT吧 </a> </div> 
  2.   <p>二组文字重合的效果</p> 
  3. </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. } 

相关视频

    没有数据

相关阅读 个性化jQuery和CSS3菜单源码CSS实现Tab技巧CSS复位-CSS Reset代码举例IE6绝对定位的bug及其解决办法CSS样式表创建美妙绝伦的网站几个最常用和实用的CSS技巧将网站（主页）变成黑白DW设计网页时组织CSS的建议

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 页面进入效果表单 XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧

人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法