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;

初版：2024年12月29日、最終更新：2024年12月29日

https://www.tohoho-web.com/css/prop/mask-clip.htm