border-image プロパティ
border-image プロパティは、画像を border として利用できるプロパティです。
border-image プロパティは以下のプロパティを一括で定義できます。
表示するためには border を設定しなければなりません。
border: 20px solid transparent; border-image: url("img/62469.png") 100 stretch;
ページ内 Index
- ad -
構文(Syntax)
CSS
border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat | initial | inherit;
DOM ( JavaScript )
String = object.style.borderImage;
object.style.borderImage=" border-image-source border-image-slice border-image-width border-image-outset border-image-repeat | initial | inherit";
値(Values)
Value | 摘要 |
---|---|
border-image-source | 画像のURL |
border-image-slice | 画像のスライスする大きさ/割合(%) |
border-image-width | borderの幅 |
border-image-outset | 元のborder位置からどのくらい離すか |
border-image-repeat | 繰り返し方法 |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | none 100% 1 0 stretch |
継承(Inherited) | no |
変化(Animatable) | no |
Example
素材Goodの画像を利用させていただきました。
- ad -
関連プロパティ
以下は関連するプロパティです。
border | border-width、border-style、border-colorプロパティを一括指定 |
border-color | 線の色 |
border-radius | 線の角を丸く |
border-style | 線の種類 |
border-width | 線の幅 |