Eigenschaft border-image

Die Eigenschaft border-image legt ein Bild für den Rahmen fest und ist eine Kurzschreibweise für die Eigenschaften border-image-source, border-image-slice, border-image-repeat, border-image-width und border-image-outset. Dabei erschien die Kurzschreibweise in CSS früher als die einzelnen Eigenschaften und wird daher von einer größeren Anzahl älterer Browser unterstützt.

Syntax

Selektor {
	border-image: url(Pfad zum Bild) Versatz/Dicke/Verschiebung Wiederholung;
}

Beschreibung

Das Bild, das wir für den Rahmen verwenden möchten, muss speziell aufbereitet sein: 4 Miniaturbilder für die Ecken und 4 Bilder für die Seiten. Beispiel für ein solches Bild:

In diesem Fall ist der mittlere Teil weiß belassen (da wir nicht möchten, dass er auf den Hintergrund des Elements gelangt). Beispiel für ein Bild mit gefülltem mittleren Teil:

Der Wert slice weist den Browser an, welche Teile des Bildes für die Ecken verwendet werden und welche für die Seiten (und welcher Teil der mittlere sein wird). Für die Ecken werden 4 Teile verwendet, für die Seiten werden 4 Teile verwendet und ein Teil (der mittlere) wird für den Hintergrund des Elements verwendet (optional, Schlüsselwort fill).

Das Bild wird wie folgt in Stücke "geschnitten": Für den Wert slice wird ein bis vier Werte angegeben. Lassen Sie uns das an einem Beispiel erläutern. Nehmen wir an, die folgenden Werte sind angegeben: 10 20 30 40 (Pixel px werden nicht angegeben, da das Bild sowohl Raster- als auch Vektorgrafik sein kann). Die Werte bedeuten Folgendes: 10 oben abschneiden, 20 rechts abschneiden, 30 unten abschneiden, 40 links abschneiden. Welcher Teil des Bildes landet in der linken oberen Ecke? Dies wird das Stück sein: 10 von oben, 40 von links. In die rechte obere Ecke kommt 10 von oben, 20 von rechts. Und so weiter.

Meistens ist das Bild symmetrisch (wie die Rauten oben) und wir müssen gleiche Stücke für die Ecken abschneiden. In diesem Fall wird ein Wert angegeben, der gleiche Versätze von allen Seiten festlegt. Um die orangefarbenen Rauten abzuschneiden, geben wir slice als 26 an (da die orangefarbene Raute eine Größe von 26px auf 26px hat). Die gelben Rauten landen auf den Linien des Rahmens und mit ihnen passiert Folgendes: sie werden entweder auf den gesamten Block gestreckt oder entlang des Rahmens wiederholt (abhängig vom Wert repeat):

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

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

Die Eigenschaft border-image erlaubt es nicht, die Dicke des Rahmens des Elements anzugeben. Der Browser streckt das Bild einfach entlang des Rahmens mit der bereits vorhandenen Breite. Daher muss diese über die Eigenschaft border festgelegt werden.

Nutzer älterer Browser (oder mit deaktivierten Bildern) sehen den standardmäßigen Rahmen, der in border festgelegt wurde. Daher ist es sinnvoll, ihm einen passenden Stil und eine passende Farbe zu geben.

Werte

Wert	Beschreibung
url(Pfad zum Bild)	Pfad zum Bild. Weitere Informationen finden Sie unter `border-image-source`.
Versatz	Weist den Browser an, welche Teile des Bildes für die Ecken verwendet werden, welche für die Seiten (und welcher Teil der mittlere sein wird). Mögliche Werte: von `1` bis `4` Zahlen \| von `1` bis `4` Prozent. Durch Leerzeichen getrennt kann zusätzlich zu Zahlen oder Prozent das Schlüsselwort `fill` angegeben werden. Weitere Informationen finden Sie unter `border-image-slice`.
Dicke	Die Eigenschaft steuert die Breite des sichtbaren Teils des Rahmens, skaliert ihn. Wenn dieser Wert größer als die Breite von `border-width` ist, kriecht das Rahmenbild unter den Inhalt. Mögliche Werte: CSS-Einheiten \| Prozente \| Zahl \| `auto`. Weitere Informationen finden Sie unter `border-image-width`.
Verschiebung	Interessante Eigenschaft, die es erlaubt, den Rahmen über die Grenzen des Elements hinaus zu verschieben. Negative Werte werden nicht unterstützt. Mögliche Werte: CSS-Einheiten (außer % (?)) \| positive Zahl \| auto. Weitere Informationen finden Sie unter `border-image-outset`.
Wiederholung	Gibt an, wie das Bild auf den Rändern (nicht auf den Ecken) wiederholt werden soll: kacheln oder strecken. Mögliche Werte: `stretch` \| `repeat` \| `round` \| `space`. Weitere Informationen finden Sie unter `border-image-repeat`.

Standardwert: none 100%/1/0 stretch (url(Pfad zum Bild) Versatz/Dicke/Verschiebung Wiederholung).

Beispiel . border-image-repeat: Wert repeat

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

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

Beispiel . border-image-repeat: Wert stretch

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

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

Beispiel . border-image-repeat: Wert round

Im Normalzustand ist derzeit der Wert repeat eingestellt, und beim Darüberfahren mit der Maus - round. Beachten Sie, dass vor dem Überfahren in den Rahmen keine ganze Anzahl von Rauten passt, und nach dem Überfahren - eine ganze. So funktioniert round:

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

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

Beispiel . border-image-repeat: zwei Wörter

Wert repeat für die Breite und stretch für die Höhe:

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

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

Beispiel . Übereinstimmung der Bildbreite mit der Rahmenbreite

Wir erhöhen border-width beim Überfahren mit der Maus, behalten dabei die Dicke von border-image bei. Die Rauten werden über den gesamten Rahmen gestreckt:

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

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

Beispiel . border-image-slice

Nehmen wir ein anderes Bild, bei dem die verschiedenen Stücke nicht gleich sind:

Wir geben an, welche Teile vom Bild abgeschnitten werden sollen - 25% 30% 10% 20%. Das funktioniert so: 25% - Abstand oben, 30% - Abstand rechts, 10% - Abstand unten, 20% - Abstand links. Im Grunde schneiden wir mit diesen Stücken die Ecken ab. Die obere linke Ecke wird 25% von der Oberseite des Bildes und 20% von links sein. Die obere rechte Ecke wird 25% von der Oberseite des Bildes, und 30% von rechts sein und so weiter.

Wenn Sie außerdem die Maus über den Block bewegen, wird das Schlüsselwort fill aktiviert, und der mittlere Teil des Bildes wird zum Hintergrund unseres Blocks:

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

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Beispiel

Erstellen wir einen Farbverlauf-Rahmen mit Hilfe eines linearen Farbverlaufs:

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

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Beispiel . border-image-width

Setzen wir den Wert border-image-width auf 2 (das Rahmenbild wird um das 2-fache größer als der Rahmen selbst), wenn die Maus über das Element fährt (26/2 - nach dem Schrägstrich angegeben, wobei 26 der Wert für border-image-slice ist). Beachten Sie, dass der Rahmen selbst nicht größer wurde, das Rahmenbild aber schon, da es unter den Text kriechen wird:

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

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

Beispiel . border-image-outset

Setzen wir den Wert border-image-outset auf 3, wenn die Maus über das Element fährt. (26/1/2 - nach dem zweiten Schrägstrich angegeben, wobei 26 der Wert für border-image-slice ist, und - 1 - border-image-width):

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

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

Siehe auch

die Eigenschaft border-image-source,
die den Pfad zum Bild für den Rahmen festlegt
die Eigenschaft border-image-slice,
die die Aufteilung des Bildes für den Rahmen festlegt
die Eigenschaft border-image-repeat,
die die Wiederholung des Bildes für den Rahmen festlegt
die Eigenschaft border-image-width,
die die Größe des Bildes für den Rahmen festlegt
die Eigenschaft border-image-outset,
die die Verschiebung des Bildes für den Rahmen festlegt