文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置：首页 → 网页设计 → 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键的用法