clip

已棄用: 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它，但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能，盡可能更新現有程式；請參考頁面底部的相容性表格來下決定。請注意：本功能可能隨時停止運作。

警告： 若有可能，建議作者使用較新的 clip-path 屬性來取代。

clip CSS 屬性定義了元素的可見部分。clip 屬性僅適用於絕對定位的元素，即具有 position:absolute 或 position:fixed 的元素。

語法

css
/* 關鍵字值 */
clip: auto;

/*  值 */
clip: rect(1px, 10em, 3rem, 2ch);

/* 全域值 */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;

值

rect()

使用 rect() 函式定義的矩形，其語法形式為為 rect(, , , )。 和 值是從盒子內部上邊框邊緣的偏移，而 和 是從內部左邊框邊緣的偏移，即填充區域的範圍。

、、 和 的值可以是 或 auto。若任何邊的值為 auto，元素將會被裁切至該邊的內部邊框邊緣。

備註： 在已棄用的 clip 屬性中所使用的 rect() 函式，與用來定義 CSS 的 rect() 函式是不同的。

auto

元素不裁切（預設值）。這不同於 rect(auto, auto, auto, auto)，後者裁切至元素的內部邊框邊緣。

形式定義

預設值auto
Applies toabsolutely positioned elements
繼承與否no
Computed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwise
Animation typea rectangle

形式語法

clip = 
    |
  auto      

 = 
  rect(  ,  ,  ,  )

範例

裁切圖像

html

  原圖
  圖像被剪裁到左上角
  圖像被剪裁到中間
  圖像被剪裁到右下角
css
.dotted-border {
  border: dotted;
  position: relative;
  width: 390px;
  height: 400px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 400px;
  clip: rect(0, 130px, 90px, 0);
}

#middle {
  left: 270px;
  clip: rect(100px, 260px, 190px, 130px);
}

#bottom-right {
  left: 140px;
  clip: rect(200px, 390px, 290px, 260px);
}

規範

Specification
CSS Masking Module Level 1
# clip-property

瀏覽器相容性

參見