Die CSS-Eigenschaft border-image-width definiert die Breite des Randbildes.
Die Eigenschaft border-image-width kann von einem bis zu vier Werten haben - oben, rechts, unten und links.
Wir können einen, zwei, drei oder vier Werte verwenden. Wenn ein Wert definiert ist, gilt die gleiche Breite 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 den oberen Teil, der zweite für den linken und rechten Teil und der dritte für den unteren Teil.
Wenn vier Werte definiert sind, gelten die Breiten für oben, rechts, unten und links wie in der Uhr. Das bedeutet, wenn der vierte Wert weggelassen wird, ist er derselbe wie der zweite. Wenn der dritte weggelassen wird, ist er derselbe wie der erste. Wenn der zweite weggelassen wird, ist er derselbe wie der erste.
| Anfangswert | 1 |
| Gilt für | Alle Elemente, mit Ausnahme von internen Tabellenelementen, wenn border-collapse auf collapse ist. Es gilt auch für ::first-letter. |
| Geerbt | Nein |
| Animierbar | Nein |
| Version | CSS3 |
| DOM Syntax | object.style.borderImageWidth = "20px"; |
Syntax
border-image-width: number | % | auto | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 20px;
border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
border-image-slice: 20;
border-image-repeat: round;
border-image-width: 20px;
}
</style>
</head>
<body>
<h1>Ein Beispiel für border-image-width</h1>
<p class="border">Hier ist border-image-width auf 20px gesetzt.</p>
</body>
</html>Hier ist ein weiteres Beispiel, wo Sie sehen können, was geändert wird, wenn ein, zwei, drei oder vier Werte verwendet werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.border1 {
border: 10px solid transparent;
padding: 20px;
border-image: url("/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("/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("/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("/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>Ein Beispiel für border-image-width</h1>
<p class="border1">Hier ist border-image-width auf 20px. gesetzt.</p>
<p class="border2">Hier ist border-image-width auf 20px und 10px gesetzt.</p>
<p class="border3">Hier ist border-image-width auf 20px, 10px und 40px gesetzt.</p>
<p class="border4">Hier ist border-image-width auf 20px, 10px, 40px und 55px gesetzt.</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| length | Eine Längeneinheit (px), die die Größe von border-width definiert. |
| number | Die Randbreite ist als ein Vielfaches der entsprechenden Rahmenbreite definiert. Er darf nicht negativ sein, und der Standardwert ist 1. |
| percentage | Es wird berechnet in Bezug auf die Breite des Randbildbereichs für horizontale Versätze und die Höhe des Randbildbereichs für vertikale Versätze. |
| auto | Die Randbreite wird gleich der inneren Breite oder Höhe von entsprechenden border-image-slice gemacht. |
| initial | Es setzt die Eigenschaft auf seinen Standardwert. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 15.0+ | 13.0+ | 6.0+ | 15.0+ |
Übe dein Wissen
