項 目 | 説 明 |
---|---|
記述形式 | セレクタ {border-image-width: 値 } |
値 の形式 |
|
初 期 値 | 1 |
対応ブラウザー | C3+ / e?+ / n?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
適用可能な要素 | すべての要素 (border-collapse プロパティの値に collapse が指定された table内要素を除く) |
継 承 | しない |
border-image-width プロパティ は,画像による境界を表示する幅 を 境界画像領域(border image area) を基準として指定します。
指定できる値は,つぎのとおりです。
値 | 説 明 |
---|---|
数値(長さ) | 境界画像の上下左右の各表示幅を 境界画像領域 の上下左右端からの各オフセットで指定します。 |
数値(%) | 境界画像の上下左右の各表示幅を 境界画像領域 の上下左右端からの各オフセットで, 境界画像領域 の幅(左右)や高さ(上下)を 1 とした百分率(%)を使って指定します。 |
数値(倍数) | 境界画像の上下左右の各表示幅を 境界画像領域 の上下左右端からの各オフセットで, 境界幅 を 1 とした 倍数 を使って指定します。 |
auto | border-image-slice プロパティの値で決まる画像の幅や高さを使用します。 これが利用できな場合には,境界幅 が使用されます。 |
上の値 ~ 左の値 は半角ブランクを挟んでこのうち4つまで指定できます。
境界に画像を表示するためには,
指定の詳細については,各プロパティの解説を参照してください。
border-image-width プロパティ を指定しない場合は,境界画像の表示幅は,境界幅(border-width) となります。
border-image-outset を指定しない場合は,境界画像領域 は 境界ボックス の範囲と一致します。
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.sample1 { width: 320px; height: 140px; border: solid 31px transparent; border-image-source: url(star_border.png); border-image-slice: 31; border-image-width: 62px; border-image-repeat: round; -moz-border-image-source: url(star_border.png); -moz-border-image-slice: 31; -moz-border-image-width: 62px; -moz-border-image-repeat: round; -webkit-border-image-source: url(star_border.png); -webkit-border-image-slice: 31; -webkit-border-image-width: 62px; -webkit-border-image-repeat: round; -o-border-image: url(star_border.png) 31 / 62px round; } --> </style> |
HTML <body> ~ </body> |
<div class="sample1">
これが class="sample1" の部分です。
</div> |
ブラウザー 表示例 ( IE10 以前では正常に表示できません) |
---|
これが class="sample1" の部分です。
|
ただし,Opera では正常に表示できないため,同等の border-image による一括指定 に置き換えてあります。
上の表示結果を border-image-width プロパティを指定しない場合(初期値の "1" の場合)の表示結果と比較してみると違いがよくわかります。
なお,この例で境界画像として用いたのは,
とくに,Safari や Google Chrome で表示すると,テキスト「これが class="sample1" の部分です。」の背後にまで,境界画像が表示されます。 (Opera ではそうなりません。)