CSS mask-origin 属性

定義と使用法

mask-origin 属性は、マスク画像の元の位置（すなわち、マスク位置領域）を指定します。

例

表示 mask-origin 属性の異なる値：

.masked {
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask1 {
  mask-origin: border-box;
}
.mask2 {
  mask-origin: content-box;
}
.mask3 {
  mask-origin: padding-box;
}
.mask4 {
  mask-origin: fill-box;
}

実際に試してみてください

CSS 文法

mask-origin: border-box|content-box|padding-box|fill-box|stroke-box|view-box|initial|inherit;

属性値

値 説明
border-box 境界ボックスに対する位置です。デフォルト値。
content-box 内容ボックスに対する位置です。
padding-box 内枠境界ボックスに対する位置です。
fill-box オブジェクト境界ボックスに対する位置です。
stroke-box 描線境界ボックスに対する位置です。
view-box 最も近い SVG ビューポートを使用して参照フレームとしています。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit この属性は親要素から継承されます。参照してください： inherit。

技術的詳細

デフォルト値： border-box
継承性： いいえ
アニメーション作成： サポートされていません。参照してください：アニメーション関連属性。
バージョン： CSS マスクモジュール レベル1
JavaScript 文法： object.style.maskOrigin="padding-box"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
120 120 53 15.4 106

関連ページ

チュートリアル：CSS マスク

参照：CSS mask 属性

参照：CSS mask-clip 属性

参照：CSS mask-composite 属性

参照：CSS mask-image 属性

参照：CSS mask-mode 属性

参照：CSS mask-position 属性

参照：CSS mask-repeat 属性

参照：CSS mask-size 属性

参照：CSS mask-type 属性