clip
Deprecated
Avoid using this feature in new projects.
The CSS Masking specification deprecated the clip property.
This feature may be a candidate for removal from web standards or browsers.
Consider using the following features instead: clip-path.
警告：若有可能，建議作者使用較新的 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;
值
rect()-
使用
rect()函式定義的矩形，其語法形式為為rect(<top>, <right>, <bottom>, <left>)。<top>和<bottom>值是從盒子內部上邊框邊緣的偏移，而<right>和<left>是從內部左邊框邊緣的偏移，即填充區域的範圍。<top>、<right>、<bottom>和<left>的值可以是<length>或auto。若任何邊的值為auto，元素將會被裁切至該邊的內部邊框邊緣。
備註：在已棄用的 clip 屬性中所使用的 rect() <shape> 函式，與用來定義 CSS <basic-shape> 的 rect() 函式是不同的。
auto-
元素不裁切（預設值）。這不同於
rect(auto, auto, auto, auto)，後者裁切至元素的內部邊框邊緣。
形式定義
| 預設值 | auto |
|---|---|
| 適用於 | 絕對定位的元素 |
| 繼承與否 | 否 |
| 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 |
| 動畫類型 | a 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 # propdef-clip |