設定一塊矩形格子（box），元素的內容可以顯示在其中，超出部分會隱藏。預設為元素的矩格。使用 clip 必須將 position 設為 absolute 或 fixed。可設定的值有：
- <shape>：可以設為矩形 rect(上, 右, 下, 左)。
上 右 下 左是相對於元素矩格的左上角的距離。上 右 下 左可設為<length>或是 auto。auto 是與元素矩格相同。
- auto： 切割區尺寸與元素的矩格相同，此為預設值。
- inherit：繼承父元素的特徵值。
- 下面的第二張圖像設了 clip: rect(10px, auto, 170px, 40px); position:absolute，所以展現風格與第一個不同。在 IE6，rect() 中不能加”,”作分隔；但是 IE8, Firefox, Safari, Chrome 可以。
- 風格用法：
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHoHui01woBwkOdqFjwXKNEPsuk_t0yLFXO6PdJD_OO-fTyLAksb6JrIwm_E9aY-Lj5x7LkTxeu_450N-eutQiPei_C5uprpGOxv95ef9nZe7qrn_15MVUcLVoQ3sxRkggGNo_q9g_pA7/s200/absolute.JPG" />
<img style='clip: rect(10px auto 170px 40px); position:absolute'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHoHui01woBwkOdqFjwXKNEPsuk_t0yLFXO6PdJD_OO-fTyLAksb6JrIwm_E9aY-Lj5x7LkTxeu_450N-eutQiPei_C5uprpGOxv95ef9nZe7qrn_15MVUcLVoQ3sxRkggGNo_q9g_pA7/s200/absolute.JPG" /> - 執行結果：
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr {position:absolute;
clip:rect(40px 160px 160px 40px);
}
.hvr:hover {clip:rect(40px auto 160px auto);}
.hvr:active {clip:rect(auto auto auto auto);}
</style>
<div style='position:relative; background:red; width:200px; height:200px'>
<img class=hvr src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg' />
</div> - 執行結果：
改寫 ANCHOR，將 :hover, :active 狀態傳給子元素；如此在 IE6 中，也可以使用 :hover, :active 於一般元素。:active 在 IE6 的效果不佳。
- 風格用法：
<style type='text/css'>
.akr {display:block;
position:relative;
background:red;
width:200px;
height:200px
}
.akr IMG {position:absolute;
clip:rect(40px 160px 160px 40px);
}
.akr:hover {border:none; background:red}
.akr:hover IMG {clip:rect(40px auto 160px auto);}
.akr:active IMG {clip:rect(auto auto auto auto);}
</style>
<a href='javascript:void(0)' class=akr>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg' />
</a> - 執行結果：
javascript 應用。可以用 style 物件 的特徵 clip 讀取或設定特徵值。
- 風格用法：
<div style='position:relative; background:red; width:200px; height:200px'>
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
<img id='atr3' style='position:absolute;
clip:rect(10px 160px 160px 10px); top:0px; left:0px'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg' />
</div>
<script type='text/javascript'>
var os=document.getElementById('atr3').style;
document.write( os.clip );
</script> - 執行結果：射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.rect(10px, 160px, 160px, 10px)
- 不同瀏覽器的輸出格式有不同。
