Eigenschaft border-image-width

Die Eigenschaft border-image-width steuert die Breite des sichtbaren Teils des Rahmens, skaliert ihn. Wenn dieser Wert größer ist als die Breite von border-width, wird das Rahmenbild unter den Inhalt kriechen.

Für weitere Informationen siehe die Eigenschaft border-image.

Syntax

Selektor {
	border-image-width: CSS-Einheiten | Prozent | Zahl | auto;
}

Werte

Wert	Beschreibung
CSS-Einheiten	Wert in angegebenen CSS-Einheiten.
Prozent	Werte in Prozent relativ zur Größe des Blocks, dem der Rahmen zugewiesen ist.
Zahl	Numerischer Wert, mit dem die `border-width` multipliziert wird.
`auto`	Schlüsselwort. Wenn es gesetzt ist, ist der Wert gleich dem entsprechenden `border-image-slice`. Wenn keine passende Größe vorhanden ist, wird der Wert `border-width` verwendet, wobei das Bild die gesamte Rahmenecke ausfüllt und unter den Inhalt kriecht. Siehe Beispiele für ein besseres Verständnis.

Standardwert: 1.

Beispiel . Zahl

Setzen Sie den Wert border-image-width auf 2 beim Mouseover über das Element. Dabei wird der Rahmen auf die Größe 26px*2 - auf 2 Mal größer als seine in border-width festgelegte Breite. Der Rahmen wird dabei unter den Text kriechen (wie ein Hintergrund):

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

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

Beispiel . Ändern von border-image-repeat auf round

Im vorherigen Beispiel wird sich beim Mouseover im Rahmen keine ganze Anzahl von Rauten befinden. Korrigieren wir dies, indem wir border-image-repeat auf den Wert round setzen:

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

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

Beispiel . Prozent

Setzen Sie den Wert border-image-width auf 50% beim Mouseover über das Element. Dabei wird der Rahmen auf die Größe 50% der Größe des Blocks (also zwei Rahmen, der rechte und der linke, werden den gesamten Block abdecken):

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

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

Beispiel . Prozent

Setzen Sie den Wert border-image-width auf 30% beim Mouseover über das Element. Dabei wird der Rahmen auf die Größe 30% der Größe des Blocks:

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

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

Beispiel . Pixel

Setzen Sie den Wert border-image-width auf 50px beim Mouseover über das Element:

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

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

Beispiel . Wert auto

Setzen Sie den Wert border-image-width auf auto beim Mouseover über das Element.

Vor dem Mouseover hat border-image-width den Wert 1 (standardmäßig). Im Beispiel wurde speziell border-width auf 52px gesetzt, und border-image-slice - auf den Wert 26 (der Effekt mit auto wird nur beobachtet, wenn border-width nicht gleich border-image-slice ist). Da border-image-width den Wert 1 hat, wird das Rahmenbild die gesamte Breite von border-width einnehmen, also sich auf 52px strecken. Beim Mouseover wird der Wert border-image-width auf auto gesetzt und die Bildbreite wird gleich dem Wert border-image-slice, also 26px:

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

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

Siehe auch

Eigenschaft border-image,
die eine Kurzschreibweise für Rahmenbilder ist
Eigenschaft border-image-source,
die den Pfad zum Bild für den Rahmen angibt
Eigenschaft border-image-slice,
die die Aufteilung des Bildes für den Rahmen festlegt
Eigenschaft border-image-repeat,
die die Wiederholung des Bildes für den Rahmen festlegt
Eigenschaft border-image-outset,
die die Verschiebung des Bildes für den Rahmen festlegt