理解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 */
5. }

属性解析：

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. }
30. </style>
31. <span>Hover me</span>
32. <img src="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://lorempixel.com/300/300/sports/"></li>
61. <li><img src="http://lorempixel.com/300/300/animals/"></li>
62. <li><img src="http://lorempixel.com/300/300/abstract/"></li>
63. <li><img src="http://lorempixel.com/300/300/nightlife/"></li>
64. <li><img src="http://lorempixel.com/300/300/city/"></li>
65. <li><img src="http://lorempixel.com/300/300/food/"></li>
66. <li><img src="http://lorempixel.com/300/300/people/"></li>
67. <li><img src="http://lorempixel.com/300/300/nature/"></li>
68. <li><img src="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/

理解CSS Clip属性及用法