clip
已棄用：此特性不再推薦。雖然某些瀏覽器可能仍然支援它，但它可能已經從相關的網路標準中刪除，可能正在刪除過程中，或者可能僅為相容性目的而保留。請避免使用它，如果可能，請更新現有程式碼；請參閱本頁底部的相容性表格以指導您的決策。請注意，此特性可能隨時停止工作。
警告： 建議作者使用 clip-path 屬性代替。
clip CSS 屬性定義了元素的可見部分。clip 屬性僅適用於絕對定位的元素，即帶有 position:absolute 或 position:fixed 的元素。
語法
css
/* Keyword value */
clip: auto;
/* <shape> values */
clip: rect(1px, 10em, 3rem, 2ch);
/* Global values */
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> 的 CSS rect() 函式不同。
auto-
元素不裁剪（預設）。這與
rect(auto, auto, auto, auto)不同，後者裁剪到元素的內部邊框邊緣。
正式定義
正式語法
clip =
<rect()> |
auto
<rect()> =
rect( <top> , <right> , <bottom> , <left> )
示例
裁剪影像
html
<p class="dotted-border">
<img src="macarons.png" alt="Original graphic" />
<img id="top-left" src="macarons.png" alt="Graphic clipped to upper left" />
<img id="middle" src="macarons.png" alt="Graphic clipped towards middle" />
<img
id="bottom-right"
src="macarons.png"
alt="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);
}
規範
| 規範 |
|---|
| CSS 蒙版模組 Level 1 # clip-property |
瀏覽器相容性
載入中…