clip

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

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

clip CSS 屬性定義了元素的可見部分。clip 屬性僅適用於絕對定位的元素,即具有 position:absoluteposition: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

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
clip
Deprecated
auto
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.
See implementation notes.

參見