CSS border-image-outset-Eigenschaft

Die CSS border-image-outset-Eigenschaft gibt an, um wie viel das Randbild über den Randkasten des Elements hinaus verlängert wird. Sie ist eine der CSS3-Eigenschaften. Die border-image-outset-Eigenschaft kann einen bis vier Werte annehmen.

Wenn ein Wert angegeben wird, gilt er für alle vier Seiten.
Wenn zwei Werte angegeben werden, legt der erste die Ausdehnung oben und unten fest, der zweite rechts und links.
Wenn drei Werte angegeben werden, legt der erste die Ausdehnung oben fest, der zweite rechts und links und der dritte unten.
Wenn vier Werte angegeben werden, werden die Ausdehnungen in der Reihenfolge oben, rechts, unten und links festgelegt.

Anfangswert	0
Gilt für	Alle Elemente, außer interne Tabellenelemente, wenn border-collapse auf "collapse" steht. Gilt auch für ::first-letter.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.borderImageOutset = "20px";

Syntax

CSS border-image-outset-Werte

css

border-image-outset: length | number | initial | inherit;

Beispiel für die border-image-outset-Eigenschaft:

CSS border-image-outset-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("https://de.w3docs.com/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="https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%" />
  </body>
</html>

Try it Yourself »

Ergebnis

CSS border-image-outset description

Werte

Wert	Beschreibung	Ausführen
length	Gibt den Abstand von den Kanten an, ab dem das border-image erscheint. Der Standardwert ist 0.	Ausführen »
number	Die Größe der border-image-outset als Vielfaches der entsprechenden Randbreiten des Elements.	Ausführen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausführen »
inherit	Erbt die Eigenschaft vom Elternelement.

Practice

Welchen Zweck hat die 'border-image-outset'-Eigenschaft in CSS?

Sie dient zum Festlegen des Bilderrands eines Elements.Sie dient zum Ändern der Hintergrundfarbe eines Elements.Sie dient zum Erweitern des Bilderrandbereichs über den Rand eines Elements hinaus.Sie dient zum Begrenzen des Bilderrandbereichs innerhalb des Randes eines Elements.Sie dient zum Festlegen der Schriftgröße eines Elements.

CSS border-image-outset-Eigenschaft ​

Syntax ​

Beispiel für die border-image-outset-Eigenschaft: ​

Ergebnis ​