`-webkit-mask-box-image` プロパティ (CSS)

非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。

標準外で接頭辞付きの -webkit-mask-box-image は CSS の一括指定プロパティで、要素の境界ボックスのマスク画像を設定します。

メモ: このプロパティは標準外であり、標準化路線にありません。代わりに mask-border プロパティを使用することを検討してください。

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

この値には、マスクの境界線として使用される <image> が記載されており、オプションで 4 つの境界線の外側へのオフセット値と、最大 2 つの境界線の繰り返しスタイルを指定できます。

構文

css

/* デフォルト */
-webkit-mask-box-image: none;

/* image */
-webkit-mask-box-image: url("image.png");

/* image edge-offset */
-webkit-mask-box-image: url("image.png") 10 20 20 10;
-webkit-mask-box-image: url("image.png") 10px 20px 20px 10px;

/* image repeat-style */
-webkit-mask-box-image: url("image.png") space repeat;

/* image edge-offset repeat-style */
-webkit-mask-box-image: url("image.png") 10px 20px 20px 10px space repeat;

/* グローバル値 */
-webkit-mask-box-image: inherit;
-webkit-mask-box-image: initial;
-webkit-mask-box-image: revert;
-webkit-mask-box-image: revert-layer;
-webkit-mask-box-image: unset;

値

<image>: マスク画像として使用する画像リソースの場所、<gradient>、またはその他の <image> の値。
none: 境界ボックスにマスク画像がないことを示すために使用します。
<length>: マスク画像のオフセットの大きさです。利用可能な単位は <length> を参照してください。
<percentage>: マスク画像のオフセットで、境界ボックスの対応する長さ（幅または高さ）に対するパーセント値です。
<number>: マスク画像のオフセットのピクセル単位でのサイズ。
repeat: マスク画像は、境界ボックスの範囲に必要な回数だけ繰り返されます。マスク画像が境界ボックスに均等に配置できない場合は、部分画像を含むことがあります。
stretch: マスク画像は、境界ボックスを正確に含むように引き伸ばされます。
round: マスク画像は多少引き伸ばされ、境界ボックスの端にマスク画像の一部が残らないように繰り返されます。
space: マスク画像は引き伸ばされることなく何度でも繰り返されます。境界ボックスの端に、部分的なマスク画像は置かれません。

アウトセット値（エッジオフセット）は、画像の上辺、右辺、下辺、左辺からの距離を、その順序で定義します。値は <length>、<number>、または <percentage> の形式で設定でき、数値はピクセル単位の長さとして解釈されます。

境界繰り返しスタイルが含む場合、それらは <repeat-x> <repeat-y> の順序で解釈されます。値が 1 つしか宣言されていない場合、その値は両方の軸で同じになります。background-repeat と似ていますが、cover および contain の値は対応していません。

公式定義

初期値: none
適用対象: すべての要素
継承: いいえ
計算値: 指定どおり

形式文法

-webkit-mask-box-image = 
  <mask-image-source> [ <mask-image-offset>{4} <mask-border-repeat>{1,2} ]

例

画像の設定

css

.example-one {
  -webkit-mask-box-image: url("mask.png");
}

画僧のオフセットと塗りつぶし

css

.example-two {
  -webkit-mask-box-image: url("logo.png") 100px 100px 0px 0px round round;
}

仕様書

Not part of any standard.

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年10月9日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

-webkit-mask-box-image プロパティ (CSS)

MDN の改良に協力

`-webkit-mask-box-image` プロパティ (CSS)