clip 屬性用來設置元素的形狀。用來剪裁絕對定位元素。
當一幅圖像的尺寸大於包含它的元素時，"clip" 屬性允許規定一個元素的可見尺寸，這樣此元素就會被修剪並顯示在這個元素中。
用這個屬性需要注意以下三點：
1.clip屬性只能用於絕對定位元素，position:absolute或fixed。
2.clip屬性有三種取值：auto 默認的
inherit繼承父級的
一個定義好的形狀，但現在只能是方形的 rect()
clip: { shape | auto | inherit } ;
3.shape rect(<top>, <right>, <bottom>, <left>)中的四個元素不可省略。
下面看下clip屬性的rect()函數
clip: rect(<top>, <right>, <bottom>, <left>);
具體四個數值表示什么呢？看兩張圖即可理解。
簡單的理解就是：圖片飛高就是bottom-top,寬就是right-left.當然圖片不會是負數。
clip屬性對於多數瀏覽器都可以用，寫法會有點不同
.my-element {
position
:
absolute
;
clip
: rect(
10px
350px
170px
0
);
/* IE4 to IE7 */
clip
: rect(
10px
,
350px
,
170px
,
0
);
/* IE8+ & other browsers */
}
下面寫一實例
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>clip</title>
<style type="text/css">
img {
position:absolute;
top:0;
left:10px;
clip: rect(52px, 280px, 290px, 95px);
}
</style>
</head>
<body>
<img src="00.jpg"/>
</body>
</html>
原圖和頁面顯示圖片如下
（原圖）
（頁面顯示）
參考資料：http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/