mask-border-repeat

mask-border-repeat は 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 | repeat | round | space ]{1,2}

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

mask-border-repeat: round;

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

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

• mask-border
• mask-border-mode
• mask-border-outset
• mask-border-source
• mask-border-width