一、示例
img {
position:absolute;
clip:rect(30px,200px,200px,20px);
}
二、理解
clip 属性剪裁绝对定位元素。
clip:rect矩形剪裁只能作用于position:absolute的元素上。
表示的含义就是：最终剪裁的矩形的上边距离原始元素的上边缘30像素；剪裁矩形的右边缘距离原元素左边缘的距离是200像素；剪裁矩形的下边缘距离原元素顶部的距离为200像素；剪裁矩形的左边缘距离原元素左边缘的距离时20像素。
三、浏览器支持
所有主流浏览器都支持 clip 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
四、应用介绍
1. 可用性隐藏
根据上面对top right bottom left的释义，如果left >= right或者bottom <= top，则元素会被完全裁掉而不可见，即“隐藏”。通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的，从而提高了页面的可用性。
例：
clip: rect(1px 1px 1px 1px); /*left = right, bottom = top*/
clip: rect(10px 10px 10px 100px); /*left > right*/
clip: rect(100px 10px 10px 10px); /*bottom < top*/
2. img标签下的CSS Sprite定位
3. 图片剪裁的预览效果
原文：http://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/