mask-origin

mask-origin は 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: unset;

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

形式文法

<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 */
}

<div id="masked">
</div>
<select id="origin">
  <option value="content-box">content-box</option>
  <option value="padding-box">padding-box</option>
  <option value="border-box" selected>border-box</option>
  <option value="margin-box">margin-box</option>
  <option value="fill-box">fill-box</option>
  <option value="stroke-box">stroke-box</option>
  <option value="view-box">view-box</option>
</select>

var origin = document.getElementById("origin");
origin.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskOrigin = evt.target.value;
});

仕様書

ブラウザーの対応