mask-border-repeat

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

構文

css
/* キーワード値 */
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: revert;
mask-border-repeat: unset;

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

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

値

stretch

元の画像の辺の領域は、それぞれの境界の間の溝を埋めるように引き伸ばされます。

repeat

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

round

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

space

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

公式定義

初期値stretch
適用対象すべての要素。 SVG の場合は <defs> 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

mask-border-repeat = 
  [ stretch | repeat | round | space ]{1,2}

例

基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクのスライスが境界の周りでどのように繰り返されるかを定義することができるようになります。 — つまり、ただ繰り返すのか、スライスの全体数が収まるように少しだけ拡大縮小するのか、1 つのスライスが収まるように引き伸ばすのか、ということです。

css
mask-border-repeat: round;

Chromium ベースのブラウザーは、このプロパティの古い版 — mask-box-image-repeat — に接頭辞つきで対応しています。

css
-webkit-mask-box-image-repeat: round;

メモ: mask-border ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。

仕様書

Specification
CSS Masking Module Level 1
# the-mask-border-repeat

ブラウザーの互換性

BCD tables only load in the browser

関連情報