首页 > 代码库 > 理解CSS Clip属性及用法

理解CSS Clip属性及用法

应用Clip属性实现的一个简单效果图:

 样式写法:

  1. .my-element { 
  2.     position: absolute; 
  3.     clip: rect(10px  350px  170px  0); /* IE4 to IE7 */ 
  4.     clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */ 

属性解析:

clip: { shape | auto | inherit } ;
auto 即浏览器默认解析,无clip效果,inderit 继承父层clip样式
shape 设置clip 形状,目前只支持 rect 即:矩形。 参数样例为:
  1. clip: rect(<top>, <right>, <bottom>, <left>); 

 有点不足的是 clip 属性只能使用于 位置属性设置为 absolute 或 fixed的元素

使用Clip实现的范例:

 

  1. <style
  2. img { 
  3.   position: absolute; 
  4.   left: 10px; 
  5.   top: 60px; 
  6.   display: block; 
  7.   clip: rect(200px, 0, 0, 400px); 
  8.   -webkit-transition: all 0.5s ease-out; 
  9.   -moz-transition: all 0.5s ease-out; 
  10.   transition: all 0.5s ease-out; 
  11.  
  12. span:hover ~ img { 
  13.   clip: rect(0, 400px, 200px, 0); 
  14.  
  15. span { 
  16.   display: inline-block; 
  17.   padding: 10px; 
  18.   margin: 10px; 
  19.   background: #08C; 
  20.   color: white; 
  21.   font-family: "Helvetica", "Arial", sans-serif; 
  22.   font-weight: bold; 
  23.   text-shadow: 0 -1px rgba(0,0,0,0.3); 
  24.   text-align: center; 
  25.   cursor: pointer; 
  26.  
  27. span:hover { 
  28.   background: #09C; 
  29. </style
  30. <span>Hover me</span
  31. <img src=http://www.mamicode.com/"http://lorempixel.com/400/200/"

 2

  1. <style
  2. body {   
  3.   overflow: hidden; 
  4.  
  5. ul { 
  6.   padding: 0; 
  7.   margin: 10px; 
  8.   list-style: none; 
  9.   width: 300px; 
  10.   height: 300px; 
  11.   box-shadow: 0 0 10px rgba(0,0,0,0.5); 
  12.  
  13. ul:after { 
  14.   clear: both; 
  15.   content: ""; 
  16.   display: table; 
  17.  
  18. li { 
  19.   position: relative; 
  20.   float: left; 
  21.   width: 100px; 
  22.   height: 100px; 
  23.   background: url(‘ http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/pw_maze_white.png‘); 
  24.   cursor: pointer; 
  25.  
  26. li:nth-of-type(3n+1) { 
  27.   clear: both; 
  28.  
  29. img { 
  30.   position: absolute; 
  31.   display: block; 
  32.   clip: rect(0, 100px, 100px, 0); 
  33.   -webkit-transition: all 0.2s ease-out, z-index 0s; 
  34.   -moz-transition: all 0.2s ease-out, z-index 0s; 
  35.   transition: all 0.2s ease-out, z-index 0s; 
  36.   opacity: 0.9; 
  37.  
  38. li:hover img { 
  39.   clip: rect(0, 300px, 300px, 0); 
  40.   z-index: 2;  
  41.   opacity: 1; 
  42.  
  43. li:nth-of-type(3n+1):hover img { 
  44.   left: 310px; 
  45.  
  46. li:nth-of-type(3n+2):hover img { 
  47.   left: 210px; 
  48.  
  49. li:nth-of-type(3n):hover img { 
  50.   left: 110px; 
  51.  
  52. li:nth-of-type(n+4):nth-of-type(-n+6):hover img { 
  53.   top: -100px; 
  54.  
  55. li:nth-of-type(n+7):nth-of-type(-n+9):hover img { 
  56.   top: -200px; 
  57. }  
  58. </style
  59. <ul
  60.   <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/sports/"></li
  61.   <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/animals/"></li
  62.   <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/abstract/"></li
  63.   <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/nightlife/"></li
  64.   <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/city/"></li
  65.   <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/food/"></li
  66.   <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/people/"></li
  67.   <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/nature/"></li
  68.   <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/fashion/"></li
  69. </ul

关于Clip属性应用的进阶使用范例: http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/

参考网址: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/