CSS3 border-image-slice プロパティ

ボーダー画像の分割方法を指定します：

#borderimg {
border-image-slice: 30;
}

定義と用法

border-image-slice プロパティは、border-image-source で指定された画像の分割方法を指定します。画像は、常に 9 個のセクション（4 つのコーナーと 4 つの辺と中央）に分割されます。

「中央」部分は、fill キーワードを指定しない場合でも、完全透明として取扱われます。

チップ: border-image プロパティ (全ての the border-image-* プロパティを設定するためのショートハンド・プロパティ) もご覧ください。

デフォルト値：	100%
継承：	継承する
アニメーション可否：	不可。animatable を参照
バージョン：	CSS3
JavaScript 構文：	object.style.borderImageSlice="30%" Try it

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

プロパティ
border-image-slice	15.0	11.0	15.0	6.0	15.0

border-image-slice: number|%|fill|initial|inherit;

注: border-image-slice プロパティには、1 ～ 4 個の値を指定できます。4 番目の値を省略した場合には、2 番目の値と同じになります。また、3 番目の値も省略した場合には、1 番目の値と同じになります。更に、2 番目の値も省略した場合には、1 番目の値と同じになります。

値	説明	Play it
number	ラスター画像の場合はピクセル数、ベクトル画像の場合は座標表す数値	Play it ❯
%	画像の高さと幅に相対的な割合を示すパーセンテージ	Play it ❯
fill	画像の中央部分を表示します	Play it ❯
initial	プロパティにデフォルト値を設定します。initial を参照
inherit	このプロパティは親要素を継承します。inherit を参照