CSS border-image-outset Eigenschaft
Die CSS-Eigenschaft border-image-outset gibt an, um wie viel das Rahmenbild über den Rahmenbereich hinausragt. Beispiele inklusive.
Die CSS-Eigenschaft border-image-outset gibt an, um wie viel der Rahmenbildbereich über den Rahmenbereich des Elements hinausragt. Sie ist eine der CSS3-Eigenschaften.
Standardmäßig wird ein Rahmenbild innerhalb des Rahmenbereichs gezeichnet. Es mit border-image-outset nach außen zu verschieben ist nützlich, wenn der dekorative Rahmen über das Element hinausragen soll — etwa ein ornamentaler Rahmen, ein schattenähnlicher Rahmen oder ein Banderolen-Effekt, der außerhalb des Inhalts sitzen soll, anstatt ihn einzuengen.
Der Outset ändert nur, wo das Bild gezeichnet wird; er beeinflusst nicht die Boxgröße oder das Layout des Elements. Der zusätzliche Bereich kann benachbarte Inhalte überlappen, daher sollte rund um das Element genügend Platz (oder ein zusätzlicher Außenabstand) vorhanden sein, um Überschneidungen oder Abschneiden zu vermeiden.
Funktionsweise
border-image-outset akzeptiert ein bis vier Werte nach dem standardmäßigen CSS-Kurzschreibmuster oben–rechts–unten–links:
- Ein Wert setzt alle vier Outsets.
- Zwei Werte — der erste setzt oben und unten, der zweite setzt rechts und links.
- Drei Werte — der erste setzt oben, der zweite setzt rechts und links, der dritte setzt unten.
- Vier Werte werden auf die Seiten oben, rechts, unten und links angewendet, in dieser Reihenfolge.
Jeder Wert kann entweder eine <length> (z. B. 10px) oder eine einheitenlose <number> sein. Eine Zahl ist ein Vielfaches der entsprechenden Rahmenbreite des Elements: Bei border-width: 10px ergibt ein Outset von 2 den Wert 20px. Negative Werte sind nicht zulässig.
Die Eigenschaft hat keine sichtbare Wirkung, solange keine Rahmenbildquelle festgelegt ist (über border-image oder border-image-source).
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente, außer internen Tabellenelementen, wenn border-collapse den Wert „collapse" hat. Gilt außerdem für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.borderImageOutset = "20px"; |
Syntax
CSS border-image-outset Werte
border-image-outset: length | number | initial | inherit;Beispiel der border-image-outset Eigenschaft:
CSS border-image-outset Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 10px 0 15px;
}
</style>
</head>
<body>
<h2>Border-image-outset property example</h2>
<p class="border">Hello World!</p>
<p>Here is the original image:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%" />
</body>
</html>Ergebnis
![CSS border-image-outset Beschreibung](/uploads/media/default/0001/04/9e351aa1549808ee733c6e1e41ae3509c9b7611e.png "CSS border-image-outset Beispiel" =420x)
Im obigen Beispiel wird das Rahmenbild um 10px über die obere Kante hinausgeschoben, bündig auf der rechten Seite gehalten (0) und um 15px über die untere Kante hinausgeschoben — der Rahmen ragt also sichtbar über den Absatz hinaus.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
length | Der Abstand, um den das Rahmenbild über den Rahmenbereich hinausragt, angegeben in einer beliebigen CSS-Längeneinheit (px, em usw.). Der Standardwert ist 0. | Ausprobieren » |
number | Ein einheitenloser Faktor der entsprechenden Rahmenbreite des Elements. Zum Beispiel ergibt 2 bei einem 10px-Rahmen 20px. | Ausprobieren » |
initial | Setzt die Eigenschaft auf ihren Standardwert (0). | Ausprobieren » |
inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
border-image-outset ist ein Teil der border-image-Kurzschreibweise. Diese verwandten Eigenschaften steuern den Rest des Effekts:
- border-image — die Kurzschreibweise, die alle border-image-Werte auf einmal setzt.
- border-image-source — das Bild, das als Rahmen verwendet wird.
- border-image-slice — wie das Quellbild in die neun Rahmenbereiche aufgeteilt wird.
- border-image-width — die Breite des Rahmenbildbereichs.
- border-image-repeat — ob die Segmente gestreckt, wiederholt oder gerundet werden.