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