CSS3: border-image-width プロパティ - 画像による境界の幅の指定

■ 概要

項  目説  明
記述形式 セレクタ {border-image-width: }
値 の形式
  1. 値を4つ指定: 上の値 右の値 下の値 左の値
  2. 値を3つ指定: 上の値 右の値 下の値 (左の値右の値
  3. 値を2つ指定: 上の値 右の値 (下の値上の値左の値右の値
  4. 値を1つ指定: 上の値  (右の値下の値左の値 は同じ値)
 各部の値: 数値(長さ%倍数), auto
初 期 値 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つまで指定できます。

  1. 指定する値の個数にかかわらず,値の順序は,最初から, 上の値右の値下の値左の値 と決まっています。 (上から時計回り
  2. 値を3つ指定した場合は,省略された 左の値右の値 と同じになります。 
  3. 値を2つ指定した場合は,さらに,省略された 下の値上の値 と同じになります。
  4. 値を1つだけしか指定しない場合は,それが 上下左右すべての値になります。

境界に画像を表示するためには,

  1. border プロパティ などを用いて,境界画像を表示する要素の 境界領域を確保 する。
    border-stylesolidborder-colortransparent とする。  また,border-width で,境界画像を表示する を指定する。)
  2. border-image プロパティ などの指定により,境界画像のファイル(border-image-source), 境界画像の表示に使う部分(border-image-slice)などを指定する。
という 2段階のスタイルの指定が必要 です。

指定の詳細については,各プロパティの解説を参照してください。

border-image-width プロパティ を指定しない場合は,境界画像の表示幅は,境界幅(border-width) となります。

border-image-outset を指定しない場合は,境界画像領域境界ボックス の範囲と一致します。

■ 使用例 ( border-image-width プロパティの利用)

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=&quot;sample1&quot; の部分です。
</div>

ブラウザー 表示例 ( IE10 以前では正常に表示できません)
これが class="sample1" の部分です。

ただし,Opera では正常に表示できないため,同等の border-image による一括指定 に置き換えてあります。

上の表示結果を border-image-width プロパティを指定しない場合(初期値の "1" の場合)の表示結果と比較してみると違いがよくわかります。

なお,この例で境界画像として用いたのは,

sample
のような画像で,border-image-slice の指定で,上下左右端からそれぞれ 31px のオフセットで, 中央部を除くとどれも同じ8個の部分に分割しています。 border-image-width の指定値は,border-image-slice による 各部への画像のサイズ 31px × 31px の2倍の 62px が指定されています。

とくに,Safari や Google Chrome で表示すると,テキスト「これが class="sample1" の部分です。」の背後にまで,境界画像が表示されます。  (Opera ではそうなりません。)

■ 備考

【参考ページ】