CSS3: border-image-source プロパティ - 境界に使用する画像の指定

■ 概要

項　　目説　　明
記述形式 セレクタ {border-image-source: 値 }
値 の形式 none，url(ファイル名)
初 期 値 none
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 すべての要素
（border-collapse プロパティの値に collapse が指定された table内要素を除く）
継　　承 しない

■ 解説

border-image-sourceプロパティ は，境界に使用する画像 を指定します。

指定できる値は，つぎのとおりです。

値説　　明
none 境界に使用する画像を指定しません。　（画像は表示されません）
url(ファイル名) 境界に使用する画像ファイルの URL を指定します。

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

  1. border プロパティ などを用いて，境界画像を表示する要素の 境界領域を確保 する。
    （border-style は solid， border-color は transparent とする。 　また，border-width で，境界画像を表示する 幅 を指定する。）
  2. border-image プロパティ などの指定により，境界画像のファイル（border-image-source）， 境界画像の表示に使う部分（border-image-slice）などを指定する。
という ２段階のスタイルの指定が必要 です。

詳細は，各プロパティの解説を参照してください。

■ 使用例　（ border-image-source プロパティの利用）

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-repeat: round;
      -moz-border-image-source: url(star_border.png);
      -moz-border-image-slice: 31;
      -moz-border-image-repeat: round;
      -webkit-border-image-source: url(star_border.png);
      -webkit-border-image-slice: 31;
      -webkit-border-image-repeat: round; }
-->
</style>
HTML
<body> ～ </body>		 
<div class="sample1">
   これが class=&quot;sample1&quot; の部分です。
</div>

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

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

sample
のような画像で，border-image-slice の指定で，上下左右端からそれぞれ 31px のオフセットで， 中央部を除くとどれも同じ８個の部分に分割しています。

■ 備考

【参考ページ】