border-image の活用テクニック

1. 互換性

効果が良いかどうかは二の次で、最も重要なのは互換性です。結論として、IE ブラウザを考慮する必要がないのであれば、安心して border-image を使用できます。詳細は caniuse を確認してください。

低バージョンの Android や iOS Safari ではベンダープレフィックスを付けないと有効になりません。Opera もプレフィックスが必要です。そのため、最高の互換性を確保するには、 -ms- 以外のすべてのプレフィックスを追加する必要があります（IE11/IE Mobile 11 は標準仕様に準拠しており、[11未満] は完全にサポートしていません）。

2. 具体的な構文

よく使われる書き方：

border-image：url("bd.png") 10 20 30 40 repeat;
border-width: 10px 20px 30px 40px;

注意：10 20 30 40 は分割する位置であり、px や em などの単位を付けてはいけません。数値（デフォルトの単位は px）またはパーセンテージのみ指定可能です。サンプルコードは、上から 10px、右から 20px、下から 30px、左から 40px の位置に切り取り線があり、4本の線でナインパッチ（九宮格）を切り出すことを表しています。これら4つのパラメータは、 border-width と同様に1つ、2つ、または3つに省略可能です。プロパティ名は border-image-slice です。

繰り返しの設定がデフォルトの stretch の場合、ナインパッチに切り出した後のルールは、四隅は変化せず、それ以外のマスの内容は引き伸ばされます。

repeat パラメータも少し特殊で、no-repeat は存在しません。あるのは repeat（繰り返し）、round（タイル状に並べる）、stretch（引き伸ばし）のみです。デフォルト値は stretch（引き伸ばし） です。タイル状（round）と繰り返し（repeat）の違いに注意してください：

たとえるなら、99.5m × 99.5m の未内装の部屋を購入し、床に 1m × 1m の正方形のタイルを敷くとしましょう。「round（タイル状）」の場合、1m のタイルをそのまま敷くことはできません。調整が必要です。どのように調整するかというと、各タイルを 0.995m × 0.995m に圧縮して敷き詰めます。つまり、round は完全なユニットで領域全体を埋め尽くします。「repeat（繰り返し）」の場合、1m × 1m のタイルを角から順番に並べていき、最後に入りきらなくなったタイルは途中で「パツン」と切られます。そのため、部屋の隅には半分に切れたタイルが並ぶことになります。

（CSS3 border-image详解、应用及jQuery插件 ? 张鑫旭-鑫空间-鑫生活より引用）

3. テクニック

1. `border-width` と `border-image-slice` の値を同じにする

複数回のスケーリングによる画像の劣化（ぼやけ）を防ぐことができます。

2. 両端を伸縮させない方法

タブのラベルのように、左右の両端は伸縮させず、中央部分だけを伸ばしたい場合があります。解決策は以下の通りです：

まず border-image-slice の top/bottom の値を画像全体の高さと同じにし、もう一方（bottom/top）を 0 に設定します。これにより、ナインパッチから2行（中央の行と下/上の行）がなくなります。残った1行が上端または下端の行となり、左右の両端は伸縮されなくなります。
次に border-width の値を border-image-slice と同じに設定します。
子要素を親要素に対して絶対配置にし、負の margin を設定します（子要素を親要素のボーダーの上に配置します）。

親要素のボーダーがすでに子要素の位置を占有しているため、子要素に position: absolute; を設定して通常のドキュメントフローから外し、空間を占有しないようにする必要があります。

3. 中央のマスを塗りつぶす方法

標準の border-image 実装では中央のマスは塗りつぶされませんが、 -webkit- の実装では塗りつぶされます。中央のマスを確実に塗りつぶすには、以下のように記述する必要があります：

-moz-border-image: url("../img/btn-half.png") fill 36 20 0 20;
-o-border-image: url("../img/btn-half.png") 36 20 0 20;
-webkit-border-image: url("../img/btn-half.png") 36 20 0 20;
border-image: url("../img/btn-half.png") fill 36 20 0 20;

Opera と Chrome の解釈は一致していますが標準仕様とは異なり、Mozilla は標準の実装に準拠しています。

参考資料

CSS3 border-image 不同浏览器的表现记录のコメントセクション
CSS3 border-image详解、应用及jQuery插件