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 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 |