clip
clip
は CSS のプロパティで、要素のどの部分が可視であるかを定義します。 clip
プロパティは絶対配置された要素、つまり position:absolute
または position:fixed
を持つ要素だけに適用されます。
css
/* キーワード値 */
clip: auto;
/* <shape> 値 */
clip: rect(1px, 10em, 3rem, 2ch);
/* グローバル値 */
clip: inherit;
clip: initial;
clip: revert;
clip: unset;
構文
メモ: 可能であれば、より新しい clip-path
を使うことをお勧めします。
値
<shape>
-
rect(<top>, <right>, <bottom>, <left>)
形式の矩形の<shape>
です。<top>
と<bottom>
は、ボックス境界の上辺からのオフセットを表します。<right>
と<left>
は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。<top>
、<right>
、<bottom>
、<left>
の値は<length>
またはauto
のいずれかです。auto
が指定されると、その辺の内部のボックス境界で切り取られます。 auto
-
要素はクリップされません (既定値)。ボックス境界で切り取る
rect(auto, auto, auto, auto)
とはまったく異なることに注意してください。
公式定義
初期値 | auto |
---|---|
適用対象 | 絶対位置指定された要素 |
継承 | なし |
計算値 | auto が指定されていれば auto 、それ以外は 4 つの値をともなう矩形。矩形の場合、各値は auto が指定されていれば auto 、それ以外では長さの計算値 |
アニメーションの種類 | rectangle |
形式文法
例
画像の切り抜き
CSS
css
.dotted-border {
border: dotted;
position: relative;
width: 536px;
height: 350px;
}
#top-left,
#middle,
#bottom-right {
position: absolute;
top: 0;
}
#top-left {
left: 360px;
clip: rect(0, 175px, 113px, 0);
}
#middle {
left: 280px;
clip: rect(119px, 255px, 229px, 80px);
}
#bottom-right {
left: 200px;
clip: rect(235px, 335px, 345px, 160px);
}
HTML
html
<p class="dotted-border">
<img src="hut.jpg" title="Original graphic" />
<img id="top-left" src="hut.jpg" title="Graphic clipped to upper left" />
<img id="middle" src="hut.jpg" title="Graphic clipped towards middle" />
<img
id="bottom-right"
src="hut.jpg"
title="Graphic clipped to bottom right" />
</p>
結果
仕様書
Specification |
---|
CSS Masking Module Level 1 # clip-property |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このプロパティは非推奨です。代わりに
clip-path
を使ってください。 - 関連する CSS プロパティ:
text-overflow
,white-space
,overflow-x
,overflow-y
,overflow
,display
,position