border-image-slice プロパティ

プロパティ border-image-slice は、ブラウザに対し、画像のどの部分が角に、どの部分が辺に使用されるか（およびどの部分が中央部分になるか）を指示します。角には 4 つの部分が使用され、辺には 4 つの部分が使用され、 1 つの部分（中央部分）は要素の背景に使用されます（オプション、キーワード fill）。

詳細な情報については、プロパティ border-image を参照してください。

構文

<+css+> セレクタ { border-image-slice: 1から4の数字 | 1から4のパーセント; } <-css->

数字やパーセントの後ろに、スペースを挟んでキーワード fill を置くことができます。

値

値	説明
パーセント	パーセントは画像サイズに対して計算されます。水平方向は幅に対して、垂直方向は高さに対して計算されます。
数字	数字はピクセル（ラスター画像の場合）または座標（ベクター画像の場合）を表します。単位は指定しません。
`fill`	デフォルトの動作では、画像の中央部分は破棄されます。これを利用するには、数字やパーセントに加えてキーワード `fill` を使用する必要があります。

パラメータの数

オフセットは 1、2、 3 または 4 つのパラメータを取ることができます。オフセットの単位は記述しないことに注意してください（例えば、20px ではなく単に 20）。厚さは % で指定することもできます。

パラメータの数	説明
`1`	すべての辺の厚さを同時に指定します。
`2`	1 2; - 上辺と下辺が `1px`、左辺と右辺が `2px`。
`3`	`1 2 3`; - 上辺が `1px`、左辺と右辺が `2px`、下辺が `3px`。
`4`	`1 2 3 4`; - 上辺が `1px`、右辺が `2px`、下辺が `3px`、左辺が `4px`。

デフォルト値: 100%(?)。

例

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

#elem {
	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;
}

例

<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;
}

border-image-slice プロパティ

構文

値

パラメータの数

例

例

関連項目