CSS border-image-width-Eigenschaft
Die CSS border-image-width-Eigenschaft definiert die Breite des Randbildes.
Die border-image-width-Eigenschaft ist eine der CSS3-Eigenschaften.
Sie kann einen bis vier Werte annehmen - für die Seiten oben, rechts, unten und links.
Wir können einen, zwei, drei oder vier Werte verwenden. Wenn ein Wert definiert ist, gilt er für alle vier Seiten. Wenn zwei Werte definiert sind, gilt der erste für oben und unten, der zweite für links und rechts. Wenn drei Werte definiert sind, gilt der erste für oben, der zweite für links und rechts und der dritte für unten. Wenn vier Werte definiert sind, gelten die Breiten für oben, rechts, unten und links (im Uhrzeigersinn). Das bedeutet, wenn der vierte Wert weggelassen wird, entspricht er dem zweiten. Wenn der dritte Wert weggelassen wird, entspricht er dem ersten. Wenn der zweite Wert weggelassen wird, entspricht er dem ersten.
| Anfangswert | 1 |
|---|---|
| Gilt für | Alle Elemente, außer interne Tabellenelemente, wenn border-collapse auf collapse gesetzt ist. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.borderImageWidth = "20px"; |
Syntax
Syntax der CSS border-image-width-Eigenschaft
border-image-width: number | % | auto | initial | inherit;Beispiel für die border-image-width-Eigenschaft:
Beispiel für die CSS border-image-width-Eigenschaft mit px-Wert
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 20px;
border-image: url("https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
border-image-slice: 20;
border-image-repeat: round;
border-image-width: 20px;
}
</style>
</head>
<body>
<h1>Border-image-width Example</h1>
<p class="border">Here the border-image-width is set to 20px.</p>
</body>
</html>Ergebnis
Hier ist ein weiteres Beispiel, das zeigt, was sich ändert, wenn ein, zwei, drei oder vier Werte verwendet werden.
Beispiel für die border-image-width-Eigenschaft mit verschiedenen Werten:
Beispiel für die CSS border-image-width-Eigenschaft mit zwei, drei und vier Werten
<!DOCTYPE html>
<html>
<head>
<style>
.border1 {
border: 10px solid transparent;
padding: 20px;
border-image: url("https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px;
}
.border2 {
border: 10px solid transparent;
padding: 20px;
border-image: url("https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px 10px;
}
.border3 {
border: 10px solid transparent;
padding: 40px;
border-image: url("https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px 10px 40px;
}
.border4 {
border: 10px solid transparent;
padding: 55px;
border-image: url("https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px 10px 40px 55px;
}
</style>
</head>
<body>
<h1>The border-image-width Example</h1>
<p class="border1">Here the border-image-width is set to 20px.</p>
<p class="border2">Here the border-image-width is set to 20px and 10px.</p>
<p class="border3">Here the border-image-width is set to 20px, 10px and 40px.</p>
<p class="border4">Here the border-image-width is set to 20px, 10px, 40px and 55px.</p>
</body>
</html>Werte
| Wert | Beschreibung | Testen » |
|---|---|---|
| length | Eine Längeneinheit (px), die die Größe der border-width definiert. | Testen » |
| number | Die Randbreite wird als Vielfaches der entsprechenden border-width definiert. Sie darf nicht negativ sein, der Standardwert ist 1. | Testen » |
| percentage | Wird in Bezug auf die Breite des Randbildbereichs für horizontale Verschiebungen und die Höhe des Randbildbereichs für vertikale Verschiebungen berechnet. | Testen » |
| auto | Die Randbreite wird gleich der inhärenten Breite oder Höhe des entsprechenden border-image-slice gesetzt. | Testen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Testen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Was bewirkt die Eigenschaft 'border-image-width' in CSS?