mask-origin

mask-originCSS のプロパティで、マスクの基準位置を設定します。

/* キーワード値 */
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: unset;

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

初期値border-box
適用対象すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序構文通り

構文

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 と同じです。

形式文法

<geometry-box>#

where
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

where
<shape-box> = <box> | margin-box

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

CSS

#masked {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-origin: border-box; /* Can be changed in the live sample */
}

仕様書

仕様書 状態 備考
CSS Masking Module Level 1
mask-origin の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mask-origin
実験的
Chrome 完全対応 1
接頭辞付き 補足
完全対応 1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The margin-box value is unsupported.
Edge 未対応 なしFirefox 完全対応 53
完全対応 53
未対応 20 — 53
無効
無効 From version 20 until version 53 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 15
接頭辞付き 補足
完全対応 15
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The margin-box value is unsupported.
Safari 完全対応 4
接頭辞付き 補足
完全対応 4
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The margin-box value is unsupported.
WebView Android 完全対応 2
接頭辞付き 補足
完全対応 2
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The margin-box value is unsupported.
Chrome Android 完全対応 18
接頭辞付き 補足
完全対応 18
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The margin-box value is unsupported.
Firefox Android 完全対応 53
完全対応 53
未対応 20 — 53
無効
無効 From version 20 until version 53 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 14
接頭辞付き 補足
完全対応 14
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The margin-box value is unsupported.
Safari iOS 完全対応 3.2
接頭辞付き 補足
完全対応 3.2
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The margin-box value is unsupported.
Samsung Internet Android 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The margin-box value is unsupported.
fill-box
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Non-standard values content, padding, border
実験的非標準
Chrome 完全対応 1
接頭辞付き
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 4
接頭辞付き
完全対応 4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 2
接頭辞付き
完全対応 2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 18
接頭辞付き
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 未対応 なしOpera Android 完全対応 14
接頭辞付き
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 3.2
接頭辞付き
完全対応 3.2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
stroke-box
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
view-box
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。