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.

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

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報