| 属性名 | clip |
|---|---|
| 値 |
auto
| inherit
| rect(<top>, <right>, <bottom>, <left>)
| inset(<top>, <right>, <bottom>, <left>)
|
| 初期値 | auto |
| 適用可能要素 | ブロックレベル要素 |
| 継承 | 継承する |
| メディア | visual |
| アニメーション | rectange として有効 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS2 | 4 | 1 | 1 | 7 | 1 |
画像などの一部の矩形領域だけをクリップ(抜き出し)し、表示します。position:absolute または position:fixed を適用した要素に対してのみ有効です。CSS3 には採用されず、clip-path に移行する予定です。
| 値 | 説明 |
|---|---|
| auto | クリップされません。 |
| inherit | 親要素の値を継承します。 |
| rect(...) | クリップします。<top>, <bottom> は上端からの、 <right>, <left> は左端からのオフセットで指定します。Internet Explorer 4～7 では、カンマのの代わりにスペースで区切る必要があります。 |
| inset(...) | クリップします。<top>, <right>, <bottom>, <left> はそれぞれ、上端、左端、下端、右端からのオフセットで指定します。CSS2.1 には採用されていません。サポートしているブラウザも無いようです。 |
.sample-none {
clip: none;
position: absolute;
width: 100px;
height: 100px;
left: 10px;
top: 10px;
}
.sample-rect {
clip: rect(0px, 40px, 40px, 0px);
position: absolute;
width: 100px;
height: 100px;
left: 130px;
top: 10px;
}
<div style="position:relative; width:500px; height:120px; margin:1em; border:1px solid gray;"> <img src="../image/back.gif" alt="" class="sample-none"> <img src="../image/back.gif" alt="" class="sample-rect"> </div>
