CSS clip 属性用于剪裁一个元素，使元素只有指定的部分可见。
clip 属性通过指定上右下左4个偏移值来指定元素的哪个部分可见。该属性只对为 absolute 和 fixed 的元素有效。
clip 可以接收一个CSS图形函数 rect() 作为值。 rect() 函数有4个参数，分别指定从左部和顶部向元素内部的偏移值。
clip: rect(<top>, <right>, <bottom>, <left>);
left 和 right 是从元素左侧边部向右的偏移值， top 和 bottom 是从元素顶部向下的偏移值。如下图所示：
在CSS2.1中，裁剪的区域是通过 rect() 函数来制作的矩形区域。
在CSS3规范中， clip 属性被标注为过时的属性 ，不建议在项目中使用该属性。中推出了新的属性，建议使用它来代替 clip 属性。
官方语法
clip: auto | rect() | inherit;
参数：
auto ：不裁剪元素。 rect() ：指定矩形裁剪区域。 rect() 接收4个参数，参数之间可以使用逗号来分隔或使用空格来分隔，使用逗号来分隔的语法是标准的语法，使用空格来分隔的语法可以向前兼容IE8之前的浏览器。/* 标准语法 */ rect(<top>, <right>, <bottom>, <left>) /* 兼容IE4-IE7的语法 */ rect(<top> <right> <bottom> <left>)
4个参数是类型的值，不可以是类型的百分比值，它们用于指定剪裁区域的偏移值。 top 和 bottom 值从顶部开始向下偏移， left 和 right 值从左侧开始向右偏移。
rect() 函数也可以接收 auto 关键字作为参数，它表示裁剪区域和元素的border box边相同。
rect() 函数的 top 、 right 、 bottom 和 left 参数可以接收负数值。
inherit ：从父元素中继承剪裁属性。clip 属性的初始值为 auto 。
应用范围clip 属性可以应用在所有绝对定位的元素上。
示例代码下面的代码使用 clip 属性来剪裁一幅图片。
/* 裁剪一幅图片 */
img {
clip: rect(100px, 600px, 350px, 300px);
}
在线演示
下面是使用 clip 属性来制作的一个小动画效果。使用鼠标滑过图片看看效果。
img {
width: 500px;
height: 500px;
position:absolute;
top: 0;
left: 0;
clip: rect(200px, 400px, 400px, 200px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
img:hover{
clip: rect(20px, 480px, 480px, 20px);
}
浏览器支持
所有的现代浏览器都支持 clip 属性，包括Chrome，Firefox，Safari，Opera，IE 以及 Android 和 iOS。IE4-7支持空格分隔 rect() 值的语法。IE8及以上的IE浏览器支持逗号分隔 rect() 值的语法。