CSS ボーダーアイコンスライス属性

定義と使用法

border-image-slice属性は、画像境界の内向きオフセットを定義します。

参照：

CSS3チュートリアル：CSS3 边框

例

画像境界の内向きオフセットを指定します：

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

CSS文法

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

注釈：この属性は、画像の上、右、下、左のエッジの内向きオフセットを定義し、画像は9つの領域に分割されます：4つの角、4つのエッジおよび中央の領域。キーワードfillを使用していない場合、中央の画像部分は削除されます。第4つの数値またはパーセンテージを省略すると、第2つの値と同じになります。第3つの値を省略すると、第1つの値と同じになります。第2つの値を省略すると、第1つの値と同じになります。

属性値

値 説明
number 数字値は、画像内のピクセル（レーザーディスク画像の場合）またはベクターコオルディナート（ベクターアイコンの場合）を表します。
% 画像サイズに対するパーセンテージ：画像の幅が水平オフセットに影響し、高さが垂直オフセットに影響します。
fill 境界線の画像の中央部分を保持します。

技術的詳細

デフォルト値： 100%
継承性： no
バージョン： CSS3
JavaScript文法： object.style.borderImageSlice="50% 50%"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

参照してください border-image 属性。