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