プロパティ border-image-repeat

プロパティ border-image-repeat は、画像としてのボーダーの内側部分の繰り返し方法を指定します。詳細な情報については、プロパティ border-image を参照してください。

構文

セレクタ {
	border-image-repeat: stretch | repeat | round;
}

値

パラメータの数	説明
`stretch`	ボーダーの画像を要素のサイズまで引き伸ばします。この値がデフォルトで使用されます。
`repeat`	ボーダーの画像を繰り返します。
`round`	画像を繰り返し、要素の辺に整数個の画像が収まるようにスケーリングします。

デフォルト値: stretch。

パラメータの数

1 または 2 のパラメータを取ることができます。 2つのパラメータが指定された場合、最初のパラメータは上辺と下辺に、2番目のパラメータは左辺と右辺に適用されます。

例 . stretch の値

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

例 . repeat の値

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

例 . round の値

現在、通常状態では repeat の値が設定されており、ホバー時には round が設定されています。ホバー前はボーダーに菱形が整数個収まっていませんが、ホバー後は整数個収まっていることに注意してください。これが round の動作です：

<div id="elem"></div>

#elem:hover {
	border-image-repeat: round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

例 . 2つのキーワード

幅には repeat、高さには stretch の値：

<div id="elem"></div>

#elem {
	border-image-repeat: repeat stretch;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

プロパティ border-image-repeat

構文

値

パラメータの数

例 . stretch の値

例 . repeat の値

例 . round の値

例 . 2つのキーワード

関連項目