mask-border-repeat
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
構文
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 |
---|---|
適用対象 | すべての要素。 SVG の場合は defs 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
基本的な使用
このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクのスライスが境界の周りでどのように繰り返されるかを定義することができるようになります。 — つまり、ただ繰り返すのか、スライスの全体数が収まるように少しだけ拡大縮小するのか、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