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;
值
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 |
|---|---|
| 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 CSS data type which are rectangles are interpolated over their top, right, bottom and left component, each treated as a real, floating-point number.">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 |
瀏覽器相容性
Loading…