本文和大家重點(diǎn)討論一下CSS clip 屬性的用法，這個(gè)屬性用于定義一個(gè)剪裁矩形。對(duì)于一個(gè)絕對(duì)定義元素，在這個(gè)矩形內(nèi)的內(nèi)容才可見。

CSS clip 屬性

定義和用法

clip 屬性剪裁絕對(duì)定位元素。

當(dāng)一幅圖像的尺寸大于包含它的元素時(shí)會(huì)發(fā)生什么呢？"clip" 屬性允許您規(guī)定一個(gè)元素的可見尺寸，這樣此元素就會(huì)被修剪并顯示為這個(gè)形狀。

說明

這個(gè)屬性用于定義一個(gè)剪裁矩形。對(duì)于一個(gè)絕對(duì)定義元素，在這個(gè)矩形內(nèi)的內(nèi)容才可見。出了這個(gè)剪裁區(qū)域的內(nèi)容會(huì)根據(jù) overflow 的值來(lái)處理。剪裁區(qū)域可能比元素的內(nèi)容區(qū)大，也可能比內(nèi)容區(qū)小。

實(shí)例

剪裁圖像：

img  
  {  
  position:absolute;  
  clip:rect(0px,60px,200px,0px);  
  }  
 

瀏覽器支持

所有主流瀏覽器都支持 clip 屬性。

注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

可能的值
 

【編輯推薦】

1. CSS 絕對(duì)定位屬性absolute用法初探
2. IE6.0對(duì)padding的解讀分析
3. 探究CSS display屬性用法
4. CSS中使用margin屬性定義網(wǎng)頁(yè)邊距
5. CSS中cellspacing和cellpadding屬性用法揭秘