CSS - mask-clip
概要
| 属性名 | mask-clip |
|---|---|
| 値 | <mask-clip># |
| 値の詳細 | <mask-clip> = <coord-box> | no-clip <coord-box> = content-box | padding-box | border-box | fill-box | stroke-box | view-box |
| 初期値 | border-box |
| 適用可能要素 | すべての要素。SVG においては <defs> 要素を除くコンテナ要素、グラフィック要素、および、<use> 要素 |
| 継承 | 継承しない |
| サポート | https://caniuse.com/mdn-css_properties_mask-clip |
説明
マスクイメージ指定時の描画範囲を指定します。詳細は CSSマスク を参照してください。
- content-box
- コンテンツボックス範囲に限ります。
- padding-box
- パディングボックス範囲に限ります。
- border-box
- ボーダーボックス範囲に限ります。
- fill-box
- オブジェクトバウンディングボックス範囲に限ります。SVG で使用できます。
- stroke-box
- ストロークバウンディングボックス範囲に限ります。SVG で使用できます。
- view-box
- 直近の SVG ビューポートを参照ボックスとします。SVG ビューポートに viewBox 属性が指定されている場合、viewBox 属性の座標システムの原点に配置し、viewBox の横幅と高さを適用します。
- no-clip
- 範囲を制限しません。
margin-box は仕様から削除されました。mask-image で複数の画像を指定している場合は、mask-clip にもカンマ(,)区切りで複数の値を指定することができます。
使用例
CSS
mask-clip: content-box; mask-clip: padding-box; mask-clip: border-box; mask-clip: no-clip;
リンク
- https://developer.mozilla.org/ja/docs/Web/CSS/mask-clip
- https://drafts.fxtf.org/css-masking/#the-mask-clip
Copyright (C) 2024 杜甫々
初版：2024年12月29日、最終更新：2024年12月29日
https://www.tohoho-web.com/css/prop/mask-clip.htm