mask-origin

Baseline 2023 *
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

mask-originCSS のプロパティで、マスクの原点を設定します。

css
/* キーワード値 */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* 複数の値 */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/* 標準外のキーワード値 */
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;

/* グローバル値 */
mask-origin: inherit;
mask-origin: initial;
mask-origin: revert;
mask-origin: unset;

単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは mask-image プロパティで指定された画像の原点を指定します。複数のボックスとして描画される要素、例えば複数行にまたがるインラインボックスや複数のページにまたがるボックスなどでは、マスクの配置領域を決定するために box-decoration-break がどのボックスに作用するかを指定します。

構文

1 つまたは複数の以下に挙げたキーワード値を、カンマで区切って指定します。

content-box

位置がコンテンツボックスからの相対位置になります。

padding-box

位置がパディングボックスからの相対位置になります。単純なボックスでは 0 0 がパディング辺の左上隅で、 100% 100% は右下隅です。

border-box

位置が境界ボックスからの相対位置になります。

margin-box

位置がマージンボックスからの相対位置になります。

fill-box

位置がオブジェクトの囲みボックスからの相対位置になります。

stroke-box

位置が輪郭線ボックスからの相対位置になります。

view-box

直近の SVG ビューポートを参照ボックスとして使用します。 viewBox 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは viewBox 属性で示された座標系の原点に配置され、参照ボックスの寸法は viewBox 属性の幅と高さに設定されます。

content 非標準

content-box と同じです。

padding 非標準

padding-box と同じです。

border 非標準

border-box と同じです。

公式定義

初期値border-box
適用対象すべての要素。 SVG の場合は <defs> 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

mask-origin = 
<coord-box>#

<coord-box> =
<paint-box> |
view-box

<paint-box> =
<visual-box> |
fill-box |
stroke-box

<visual-box> =
content-box |
padding-box |
border-box

マスクの原点を border-box に設定する

下のボックス内の CSS を更新して、他の可能な値を試してみてください。

仕様書

Specification
CSS Masking Module Level 1
# the-mask-origin

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-origin
border
Non-standard
content
Non-standard
fill-box
padding
Non-standard
stroke-box
view-box

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報