CSS3: border-image-repeat プロパティ - 画像による境界の繰り返し方法の指定
■ 概要
| 項 目 | 説 明 |
|---|---|
| 記述形式 |
|
| 値 の形式 | 値1，値2，値： stretch，repeat，round，space |
| 初 期 値 | stretch |
| 対応ブラウザー | C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
| 適用可能な要素 | すべての要素 （border-collapse プロパティの値に collapse が指定された table内要素を除く） |
| 継 承 | しない |
■ 解説
border-image-repeatプロパティ は，画像による境界の繰り返し方法 を指定します。
指定できる値は，つぎのとおりです。
| 値 | 説 明 |
|---|---|
| stretch | 繰り返しなしで，境界画像領域 に合せて画像を伸縮します。 （初期値） |
| repeat | 境界画像領域 が埋まるまで繰り返して表示します。 |
| round | 境界画像領域 に完全に収まる最大回数の繰り返しを行った後，画像サイズを調整して隙間が空かないようにします。 |
| space | 境界画像領域 に完全に収まる最大回数の繰り返しを行った後，画像を等間隔に隙間を空けて並べます。 |
境界に画像を表示するためには，
- border プロパティ などを用いて，境界画像を表示する要素の 境界領域を確保 する。
（border-style は solid， border-color は transparent とする。 また，border-width で，境界画像を表示する 幅 を指定する。） - border-image プロパティ などの指定により，境界画像のファイル（border-image-source）， 境界画像の表示に使う部分（border-image-slice）などを指定する。
詳細は，各プロパティの解説を参照してください。
指定の詳細については，各プロパティの解説を参照してください。
border-image-outset を指定しない場合は， 境界画像領域 は 境界ボックス の範囲と一致します。
border-image-width プロパティ を指定しない場合は，境界画像の表示幅は，境界幅（border-width） となります。
■ 使用例 （ border-image-repeat プロパティの利用）
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" >
<!--
div.sample1 { width: 200px; height: 90px;
border: solid 31px transparent;
border-image-source: url(star_border.png);
border-image-slice: 31;
border-image-repeat: stretch;
-o-border-image: url(star_border.png) 31 stretch;}
div.sample2 { width: 200px; height: 90px;
border: solid 31px transparent;
border-image-source: url(star_border.png);
border-image-slice: 31;
border-image-repeat: repeat;
-o-border-image: url(star_border.png) 31 repeat;}
div.sample3 { width: 200px; height: 90px;
border: solid 31px transparent;
border-image-source: url(star_border.png);
border-image-slice: 31;
border-image-repeat: round;
-o-border-image: url(star_border.png) 31 round;}
div.sample4 { width: 200px; height: 90px;
border: solid 31px transparent;
border-image-source: url(star_border.png);
border-image-slice: 31;
border-image-repeat: space;
-o-border-image: url(star_border.png) 31 space;}
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample1"> これが class=&"sample1" の部分です。 </div> <div class="sample1"> これが class=&"sample2" の部分です。 </div> <div class="sample1"> これが class=&"sample3" の部分です。 </div> <div class="sample1"> これが class=&"sample4" の部分です。 </div> |
| ブラウザー 表示例 （ IE10 以前では正常に表示できません） |
|---|
これが class="sample1" の部分です。
これが class="sample2" の部分です。
これが class="sample3" の部分です。
これが class="sample4" の部分です。
|
ただし，Opera では正常に表示できないため，同等の border-image による一括指定 に置き換えてあります。 また，それ以外のブラウザーに対する ベンダープレフィックス の記述部分は省略してあります。
なお，この例で境界画像として用いたのは，
■ 備考
【参考ページ】
- 「HTMLクイック リファレンス」の「border-image-repeat プロパティ」のページ
- 「ねこだまのCSSリファレンス&デモ」の「border-image プロパティ」のページ
- 「W3C」の「border-image-repeat プロパティ」のページ