clip屬性是比較有用的屬性，但往往在實際應用中，並不多見，而52CSS.com介紹的也很少。應用clip屬性需要注意的兩點：
一、clip屬性必須和定位屬性postion一起使用才能生效。
二、clip裁切的計算座標都是以左上角即（0,0）點開始計算，如圖三所示，這點不像padding和margin，它們兩個的右邊距和下邊距是從最右邊和最下邊開始計算的。
clip屬性基礎語法： 
Example Source Code
[www.downcodes.com] clip : auto | rect ( number number number number )
取值：
auto : 預設值。對象無剪切
rect ( number number number number ) : 依據上-右-下-左的順序提供自對象左上角為(0,0)座標計算的四個偏移數值，其中任一數值都可用auto 替換，即這邊不剪切
檢索或設定物件的可視區域。可視區域外的部分是透明的。
此屬性定義了絕對(absolute)定位物件可視區域的尺寸。必須將 position 屬性的值設為 absolute ，此屬性方可使用。
自IE5開始，此屬性在MAC平台上可用。
對應的腳本特性為 clip 。
CSS中的clip屬性除了可以製作彩色文字外，還可以有效地裁切其他網頁中的元素。
clip屬性設定元素的形狀。這個屬性用來定義一個剪裁矩形。在這個矩形內的內容才可見，出了這個剪裁區域的內容和 overflow:hidden 的效果相同。剪裁區域可能比元素的內容區大，也可能比內容區小。
clip屬性值：auto | rect (top, right, bottom, left)
auto代表不裁切，rect中的上右下左四個方向填入的應是數值，表示裁切的位置。
下面我舉一個將圖片裁切的簡單例子。
首先準備一張圖片，如圖一所示，它的尺寸是159px*99像素。我打算利用clip屬性將圖片裁剪，只讓圖中的大紅點顯示出來。
我先製作一個放置圖片的div外框，它的CSS定義如下：
Example Source Code
[www.downcodes.com] #imgClip {
position:relative;
width:159px;
height:99px;
background:#FFF985;
margin:0 auto;
}
這個div的定位屬性設定為相對定位是為了讓圖片以它為定位標準，將背景定義為#FFF985是為了讓顯示效果更明顯。
再定義圖片的裁切屬性，CSS定義如下：
Example Source Code
[www.downcodes.com] #imgClip img {
position:absolute;
clip:rect(21px 68px 51px 38px);
}
這裡的絕對定位是相對於id為imgClip的div而言的，clip中的數值依照上右下左的順序排列的。
html代碼：
Example Source Code
[www.downcodes.com] <div id="imgClip">
<img src="" width="159" height="99" />
</div>
