概要
CSS の border-image-repeat プロパティは、ボーダー画像を、繰り返したり、ボーダーのサイズにあわせたりする方法を定義します。値を 1 つだけ渡すとその値で四辺すべてのボーダーを設定します。2 つ渡すと、それぞれ横方向のボーダー、縦方向のボーダーを設定します。
| 初期値 | stretch |
|---|---|
| 適用対象 | 全要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く. It also applies to ::first-letter. |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 不可 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
[ stretch | repeat | round ]{1,2}
border-image-repeat: type /* One-value syntax */ E.g. border-image-value: stretch; border-image-repeat: horizontal vertical /* Two-value syntax */ E.g. border-image-width: round space; border-image-repeat: inherit
値
- type
- 画像の繰り返し方法を表す
stretch、repeat、round、spaceのいずれかのキーワード。1 値構文でのみ使えます - horizontal
- 画像の繰り返し方法を表す
stretch、repeat、round、spaceのいずれかのキーワード。2 値構文でのみ使えます - vertical
- 画像の繰り返し方法を表す
stretch、repeat、round、spaceのいずれかのキーワード。2 値構文でのみ使えます stretch- 2 つのボーダー間をちょうど埋めるように画像を引き伸ばすためのキーワードです
repeat- 2 つのボーダー間をちょうど埋めるまで画像を繰り返すためのキーワードです
round- 2 つのボーダー間をちょうど埋めるまで画像を繰り返すためのキーワードです。整数回の繰り返しでちょうど埋まらない場合は、ちょうど埋まるようにサイズを調整します
inherit- 4 つすべての値が親要素の計算値から継承されることを示すキーワードです
例
さまざまな値の使用例は border-image をご覧ください。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 The definition of 'border-image-repeat' in that specification. |
勧告候補 | 初回定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 15.0 | 15.0 (15.0) | 未サポート | 未サポート | 未サポート |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | ? | 15.0 (15.0) | 未サポート | ? | ? |
space 値は勧告候補版の早い段階で提案されていましたが、どのブラウザも実装しなかったため取り除かれました。今後、草案で再登場するかもしれません。