clip
已棄用: 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它,但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能,盡可能更新現有程式;請參考頁面底部的相容性表格來下決定。請注意:本功能可能隨時停止運作。
總結
這個 clip
CSS 屬性用來定義元素的哪一個部分是可見的. clip
屬性只能被賦予在絕對位置的元素(element)上, 像是帶有這些的 CSS 屬性的元素 position:absolute
or position:fixed
.
警告:
這個屬性被遺棄了. 請改用 clip-path
.
預設值 | auto |
---|---|
Applies to | absolutely positioned elements |
繼承與否 | no |
Computed value | auto 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 type | a rectangle |
Syntax
/* Keyword value */
clip: auto;
/* <shape> values */
clip: rect(1px 10em 3rem 2ch);
clip: rect(1px, 10em, 3rem, 2ch);
/* Global values */
clip: inherit;
clip: initial;
clip: unset;
Values
<shape>
-
A rectangular
<shape>
of the formrect(<top>, <right>, <bottom>, <left>)
or of the formrect(<top> <right> <bottom> <left>)
(which is a more backwards compatible syntax)<top>
and<bottom>
specify offsets from the inside top border edge of the box, and<right>
, and<left>
specify offsets from the inside left border edge of the box — that is, the extent of the padding box.<top>
,<right>
,<bottom>
, and<left>
may either have a<length>
value orauto
. If any side's value isauto
, the element is clipped to that side's inside border edge. auto
-
The element does not clip (default value). Note that this is distinct from
rect(auto, auto, auto, auto)
, which does clip to the inside border edges of the element.
Formal syntax
Examples
HTML
<p class="dotted-border">
<img src="macarons.png" title="Original graphic" />
<img id="top-left" src="macarons.png" title="Graphic clipped to upper left" />
<img id="middle" src="macarons.png" title="Graphic clipped towards middle" />
<img
id="bottom-right"
src="macarons.png"
title="Graphic clipped to bottom right" />
</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);
}
結果
Specifications
Specification |
---|
CSS Masking Module Level 1 # clip-property |
Browser compatibility
BCD tables only load in the browser
See also
- Related CSS properties:
text-overflow
,white-space
,overflow-x
,overflow-y
,overflow
,display
,position