最終更新日

border-image-sliceプロパティ

border-image-sliceは、画像の分割位置を指定するプロパティです。1~4個の値で指定し、それぞれの値は半角スペースで区切ります。

4つの値はそれぞれ、画像の上端、右端、下端、左端からの距離を指定します。

・値を3個のみ指定した場合、4個目は2個目と同じ値を示す
・値を2個のみ指定した場合、3個目は1個目と同じ値を示す
・値を1個のみ指定した場合、4個の値はすべて同じ値を示す

値は、「パーセント値」または「数値」で指定します。パーセント値の場合は、画像全体の幅または高さに対する割合を「%」を付けて指定します。数値の場合は、ピクセル数を「px」を付けずに数字のみで指定します。なお、ベクター画像の場合は数値としてベクター座標を指定することもできます。

border-image-sliceを指定することで、画像は9つの区画に分割され、分割された中央部分の画像は破棄されます。しかし、パーセント値/数値の値に加えキーワード「fill」を指定すると、中央部分も破棄されずに、画像が表示されます。

ボーダー画像関連プロパティの値をまとめて指定するには、border-imageを使用します。

CSS3での変更点
・border-image-sliceは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
100% すべての要素 なし
説明
数値 画像の端からの距離を、「ピクセル数(単位なし)」や「ベクター座標」で指定します。
パーセント値 画像全体の幅や高さに対する割合で指定します。
fill スライス後の画像の中央部分が破棄されません。
サンプルコード
border-image-slice: 10;
border-image-slice: 10 10;
border-image-slice: 10 10 10;
border-image-slice: 10 10 10 10;

border-image-slice: 10%;
border-image-slice: 10% 10%;
border-image-slice: 10% 10% 10%;
border-image-slice: 10% 10% 10% 10%;

border-image-slice: 10 fill;
border-image-slice: 10% fill;
参考文献:CSS Backgrounds and Borders Module Level 3外部リンク
HOME