<shape>

構文

<shape> データ型は rect() 関数を使って指定し、長方形の形で領域を生成します。

rect()

rect(top, right, bottom, left)

値

top

<length> で、この要素のボックスの上の境界から、矩形の上端までのオフセットを表します。

right

<length> で、この要素のボックスの左の境界から、矩形の右端までのオフセットを表します。

bottom

<length> で、この要素のボックスの上の境界から、矩形の下端までのオフセットを表します。

left

<length> で、この要素のボックスの左の境界から、矩形の左端までのオフセットを表します。

補間

アニメーションの際には、<shape> データ型の値は、top、right、bottom、left の各要素に補間され、それぞれが実数の浮動小数点数として扱われます。補間の速度は、アニメーションに関連するイージング関数によって決定されます。

例

正しい rect() 関数の使い方の例

img.clip04 {
  clip: rect(10px, 20px, 20px, 10px);
}

仕様書

ブラウザーの互換性

関連情報

• 関連する CSS プロパティ: clip