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

border-image-repeat プロパティ

 border-image-repeat プロパティは、画像を border として利用できる CSS プロパティのひとつで、画像の繰り返しを指定するプロパティです。

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

border-image-repeat プロパティ
border: 20px solid transparent;
border-image: url("img/62469.png") 30;
border-image-repeat: stretch;

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

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

ページ内 Index

構文(Syntax)

 border-image-repeat プロパティの構文です。

CSS

border-image-repeat: stretch | repeat | round | initial  |inherit;

DOM ( JavaScript )

値の取得
String = object.style.borderImageRepeat;
値の設定
object.style.borderImageRepeat="stretch | repeat | round | initial | inherit";

値(Values)

 以下は border-image-repeat プロパティに指定できる値です。

Value摘要
stretch初期値、領域を埋めるように画像を引き伸ばし表示
repeat領域を埋めるように画像を繰り返し表示
round領域を埋めるように画像を整数倍で繰り返し表示
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

 border-image-repeat プロパティの備考です。

初期値(Default value)stretch
継承(Inherited)no
変化(Animatable)離散

 変化(Animatable)の離散はアニメーションの進捗が 50% で変化します。徐々に変化するようなアニメーションには見えません。

Example

 border-image-repeat プロパティの例です。

 border-image-repeat プロパティは、画像を border として利用する場合にその繰り返しを指定するプロパティです。

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

 以下の例では、素材Goodの画像を利用させていただきました。