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 プロパティで使用される<shape> 関数のrect() は、 CSS で<basic-shape> を定義するために使用する CSS のrect() 関数とは異なります。

auto: 要素はクリップされません（既定値）。ボックス境界で切り取るrect(auto, auto, auto, auto) とはまったく異なることに注意してください。

公式定義

初期値	`auto`
適用対象	絶対位置指定された要素
継承	なし
計算値	`auto` が指定されていれば`auto`、それ以外は 4 つの値をともなう矩形。矩形の場合、各値は`auto` が指定されていれば`auto`、それ以外では長さの計算値
アニメーションの種類	rectangle

形式文法

clip =
<rect()>|
auto

<rect()> =
rect(<top> ,<right> ,<bottom> ,<left>)

例

画像のクリップ

html

<p>  <img src="macarons.png" alt="Original graphic" />  <img src="macarons.png" alt="Graphic clipped to upper left" />  <img src="macarons.png" alt="Graphic clipped towards middle" />  <img       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);}