clip

概要

CSS の clip プロパティは、要素のどの部分が可視であるかを定義します。clip プロパティは position:absolute を持った要素にだけ適用されます。

• 初期値auto
• 適用対象絶対位置指定された要素
• 継承しない
• メディアvisual
• 計算値auto 指定されていれば auto、それ以外は 4 つの値をともなう矩形。矩形の場合、各値は auto 指定されていれば auto、それ以外では計算値
• アニメーションの可否矩形として可能
• 正規順序形式文法で定義される一意のあいまいでない順序

構文

形式文法: <shape> | auto

clip: rect(1px, 10em, 3rem, 2ch)
clip: auto

clip: inherit

値

<shape>

クリップの形状を示す矩形 <形状>

rect(<top>, <right>, <bottom>, <left>)   /* 標準的な構文 */

もしくは

rect(<top> <right> <bottom> <left>)      /* 後方互換の構文 */

<top> と <bottom> でボックス境界の上辺からのオフセットを指定し、<right> と <left> でボックス境界の左辺からのオフセットを指定します。

<top>、<right>、<bottom>、<left> は <length> 値または auto のいずれかです。

auto

要素はクリップされません（デフォルト値）

例

p { border:dotted;  position:relative; }

#img2 {
  position:absolute;  left:263px;

  clip: rect(40px, 200px, 150px, 30px); 
  /* 標準的な構文。Internet Explorer の4-7 では非サポート */
}

#img3 {
  position: absolute; left:526px;

  clip: rect(40px  200px  150px  30px);
  /* 非標準的な構文。Firefox と IE を含む主要ブラウザすべてでサポートされています */
}

仕様書

ブラウザ実装状況

関連情報

• clip 関連 CSS プロパティ: text-overflow 、 white-space 、 overflow-x 、 overflow-y 、 overflow 、 display 、 position