mask-border-repeat

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSS の mask-border-repeat プロパティは、どのように元の画像の辺の領域を要素のマスク境界の寸法に合うように調整するかを設定します。

構文

/* キーワード値 */
mask-border-repeat: stretch;
mask-border-repeat: repeat;
mask-border-repeat: round;
mask-border-repeat: space;

/* 上下 | 左右 */
mask-border-repeat: round stretch;

/* グローバル値 */
mask-border-repeat: inherit;
mask-border-repeat: initial;
mask-border-repeat: unset;

mask-border-repeat プロパティは、以下の値のリストから一つまたは二つの値を使用して指定します。

  • 一つの値が指定されると、全四辺に同じ動作が適用されます。
  • 二つの値が指定されると、最初の値は上と下の辺に、二番目の値は左と右の辺に適用されます。

値

stretch
元の画像の辺の領域は、それぞれの境界の間の溝を埋めるように引き伸ばされます。
repeat
元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように切り取られることがあります。
round
元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように引き伸ばされることがあります。
space
元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。正しく合うように間隔が配布されることがあります。

形式文法

[ stretch | repeat | round | space ]{1,2}

仕様書

仕様書 状態 備考
CSS Masking Module Level 1
mask-border-repeat の定義		 勧告候補 初回定義
初期値stretch
適用対象すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序構文通り

ブラウザーの対応

TBD

関連トピック