CSS <shape> データ型
非推奨
この機能を新しいプロジェクトで使用することは避けてください。
The CSS Masking specification deprecated the clip property.
この機能は、ウェブ標準やブラウザーから除去される可能性があります。
代わりに使用を検討すべき機能として、 clip-pathがあります。
<shape> は CSS のデータ型で、ある領域の具体的な形状を表します。この領域は、clip プロパティが適用される要素の一部を表します。
メモ:
<shape> と rect() は clip と連携して動作しますが、これは clip-path に置き換えらえて非推奨となりました。可能であれば、代わりに clip-path と <basic-shape> データ型を使用してください。
構文
<shape> データ型は rect() 関数を使って指定し、長方形の形で領域を生成します。
rect()
css
rect(top, right, bottom, left)
値
補間
アニメーションの際には、<shape> データ型の値は、top、right、bottom、left の各要素に補間され、それぞれが実数の浮動小数点数として扱われます。補間の速度は、アニメーションに関連するイージング関数によって決定されます。
例
正しい rect() 関数の使い方の例
css
img.clip04 {
clip: rect(10px, 20px, 20px, 10px);
}
仕様書
| 仕様書 |
|---|
| Cascading Style Sheets Level 2 # value-def-shape |
ブラウザーの互換性
関連情報
- 関連する CSS プロパティ:
clip