備忘録的プログラミングリファレンス

border-image-slice プロパティ

 border-image-slice プロパティは、画像を border として利用できる CSS プロパティで、画像の指定した部分のみを表示するプロパティです。

 元画像のピクセル分またはベクター画像の座標分、もしくは全面積の何割(%)かを指定します。

 表示するためには border を設定しなければなりません。

画像の利用範囲を25%に指定
border: 30px solid transparent;
border-image: url("img/62469.png") repeat;
border-image-slice: 25%;

詳しくは Example を参照してください

 関連するプロパティにはborder-imageborder-image-repeatborder-image-sourceborder-image-outsetborder-image-width があります。

ページ内 Index

構文(Syntax)

CSS

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

DOM ( JavaScript )

値の取得
String = object.style.borderImageSlice;
値の設定
object.style.borderImageSlice=" number | % | fill | initial | inherit";

値(Values)

Value摘要
number元画像のピクセル分またはベクター画像の座標分
%元画像を全面積の割合、初期値は100%
fillエレメントの中にも画像を表示
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)100%
継承(Inherited)no
変化(Animatable)no

Example

 素材Goodの画像を利用させていただきました。