border-image-slice プロパティ
border-image-slice プロパティは、画像を border として利用できる CSS プロパティで、画像の指定した部分のみを表示するプロパティです。
元画像のピクセル分またはベクター画像の座標分、もしくは全面積の何割(%)かを指定します。
表示するためには border を設定しなければなりません。
border: 30px solid transparent;
border-image: url("img/62469.png") repeat;
border-image-slice: 25%;
詳しくは Example を参照してください
関連するプロパティにはborder-image、border-image-repeat 、border-image-source 、border-image-outset 、border-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の画像を利用させていただきました。
関連するプロパティ
以下は関連するプロパティです。
border-image | border-imageに関するプロパティを一括定義 |
border-image-outset | 外側への表示範囲 |
border-image-repeat | 繰り返し |
border-image-slice | 元画像の利用範囲 |
border-image-source | 画像ソースのURL |
border-image-width | 幅の指定 |