clip

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

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

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

語法

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

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

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

值

<shape>

一個矩形 <shape>，格式為 rect(<top>, <right>, <bottom>, <left>)。<top> 和 <bottom> 值是從盒子內部上邊框邊緣的偏移，而 <right> 和 <left> 是從內部左邊框邊緣的偏移，即填充區域的範圍。

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

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 = 
  <rect()>  |
  auto      

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )

範例

裁切圖像

html
<p class="dotted-border">
  <img src="macarons.png" alt="原圖" />
  <img id="top-left" src="macarons.png" alt="圖像被剪裁到左上角" />
  <img id="middle" src="macarons.png" alt="圖像被剪裁到中間" />
  <img id="bottom-right" src="macarons.png" alt="圖像被剪裁到右下角" />
</p>
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

瀏覽器相容性

BCD tables only load in the browser

參見