CSS clip 属性

定義と使用法

clip 属性で絶対位置の要素をカットアウトします。

画像のサイズが含む要素よりも大きい場合に何が起こりますか？"clip"属性を使用して、要素の表示可能サイズを指定し、この要素はこの形状に切り取られ表示されます。

説明

この属性は、剪断矩形を定義するために使用されます。絶対位置を定義した要素に対して、この矩形内のコンテンツのみが表示されます。このカットアウト領域外のコンテンツは、overflowの値に応じて処理されます。カットアウト領域はコンテンツ領域よりも大きくなることも、小さくなることもあります。

も参照してください：

CSS チュートリアル：CSS 定位

HTML DOM リファレンスマニュアル：clip 属性

例

画像のカットアウト：

img
  {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
  }

実際に試してみる

CSS 文法

clip: auto|shape|initial|inherit;

属性値

値 説明
shape 要素の形状を設定します。唯一合法な形状値は：rect (top, right, bottom, left)
auto デフォルト値。任何のカットアウトは適用されません。
inherit 親要素から clip 属性の値を継承すべきことを指定します。

技術的詳細

デフォルト値： auto
継承性： no
バージョン： CSS2
JavaScript 文法： object.style.clip="rect(0px,50px,50px,0px)"

さらに多くの例

要素の形状を設定する
この例では、要素の形状を設定する方法を示します。この要素は形状に切り取られ、表示されます。

ブラウザのサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 7.0