Border-image-outset | CSS-Tricks

CSS Almanac → Eigenschaften → B → border-image-outset

Sunkanmi Fafowora am 31. Jan 2023

Die CSS border-image-outset Eigenschaft legt den Abstand zwischen dem border-image Bereich eines Elements und dem Abstand fest, wie weit er über die border-box des Elements hinausgeht.

.container {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 70; 
  border-image-width: 40%; 
  border-image-repeat: repeat;
  border-image-outset: 2;
}

Die border-image-outset Eigenschaft ist im CSS Backgrounds and Borders Module Level 3 definiert. Sie wird als „Edge Overhang“-Eigenschaft bezeichnet, was perfekt beschreibt, wozu sie entwickelt wurde: dem Border-Image-Bereich zu erlauben, über die Border-Box eines Elements hinaus zu ragen.

Syntax

border-image-outset: [<length [0,∞]> | <number [0,∞]>]{1,4}

Anfangswert: 0
Gilt für: alle Elemente (einschließlich des Pseudo-Elements ::first-letter), außer interne Tabellenelemente, wenn border-collapse auf collapse gesetzt ist.
Vererbt: nein
Prozentwerte: n/v
Berechneter Wert: vier Werte, jeder eine Zahl oder absolute Länge
Animationstyp: nach berechnetem Wert

border-image-outset akzeptiert zwischen einem und vier Werten, ähnlich wie die Kurzschreib-Eigenschaften für margin und padding.

Ein Wert: Legt alle vier Seiten auf den gleichen Abstand fest.
Zwei Werte: Der erste Wert legt den Abstand für die obere und untere Seite fest; der zweite Wert legt den Abstand für die linke und rechte Seite fest.
Drei Werte: Der erste Wert legt den Abstand für die obere Seite fest; der zweite Wert legt den Abstand für die rechte und linke Seite fest; der dritte legt den Abstand für die untere Seite fest.
Vier Werte: Legt den Abstand für jede Seite in aufsteigender Reihenfolge fest, beginnend mit der oberen Seite (oben, rechts, unten und links, in dieser Reihenfolge).

Werte

/* Length value (includes unit) */
border-image-outset: 2rem;

/* Number value (unitless) */
border-image-outset: 2;

/* Single value: Sets all four sides */
border-image-outset: 2;
border-image-outset: 2rem;
border-image-outset: 32px;

/* Two values: top and bottom | left and right */
border-image-outset: 4 6rem;
border-image-outset: 2 3rem;
border-image-outset: 1 24px;

/* Three values: top | left and right | bottom */
border-image-outset: 4rem 2 5rem;
border-image-outset: 5 8rem 10rem;
border-image-outset: 3 6 9;

/* Four values: top | right | bottom | left */
border-image-outset: 15 4rem 4 10rem;
border-image-outset: 2 5 13rem 4;
border-image-outset: 2 5 3 7rem;

/* Global values */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;

`<Länge` `[0,∞]>`

Eine Länge ist eine Zahl mit einer beliebigen CSS-Einheit – wie 10px, 1.35rem, 50%, 25dvh, etc. – und wird verwendet, um die Höhen- und Breitenabmessungen des Outsets des Bildes festzulegen.

.container{
  /* Sets dimensions on all four sides */
  border-image-outset: 2rem;
}

Das obige Beispiel gibt eine Längeneinheit von 2rem für die Outsets oben, rechts, unten und links des Rahmens an. Jede Seite hat also eine Länge von 2rem.

`<Zahl [0,∞]>`

Eine Zahl ist genau wie ein <Längen>-Wert, nur ohne CSS-Einheit. Wenn wir eine einheitlose Zahl für den Eigenschaftswert festlegen, bezieht sich diese Zahl auf den border-width-Wert. Der verwendete Wert ist gleich dem border-image-outset-Wert multipliziert mit dem border-width-Wert.

border-image-outset = <number> * border-width

Nehmen wir an, wir haben die folgende Stilregel

.container {
  border-image-outset: 4;
  border-width: 1rem;
}

Wir multiplizieren den einheitlosen <Zahl>-Wert von border-image-outset (4) mit dem border-width-Wert (1rem), was uns einen Gesamtbetrag für den Border-Image-Offset von 4rem ergibt.

border-image-outset = 4 * 1rem = 4rem

`border-image-outset` vs. `border-image-width`

Sie sind natürlich nicht dasselbe, obwohl sie in mancher Hinsicht bei ihren Werten ähnlich funktionieren. Zum Beispiel akzeptieren beide Eigenschaften <Länge> und <Zahl> Werte und bis zu vier Werte in einer einzelnen Deklaration.

Die Unterschiede zwischen den beiden Eigenschaften zeigen sich jedoch in der Art und Weise, wie jede Eigenschaft einen Teil des Border-Images eindeutig beeinflusst. border-image-width beeinflusst die physischen Abmessungen des Border-Image-Bereichs. border-image-outset beeinflusst den Abstand *zwischen* dem Border-Image und der Inhaltsbox und ermöglicht es dem Border-Image, über die Border-Box hinauszugehen.

Ein paar Dinge zu beachten

Ein paar weitere Dinge über die border-image-outset-Eigenschaft, die es wert sind, zu wissen.

Es ist wichtig, die box-sizing von Elementen auf border-box zu setzen, d. h. * { box-sizing: border-box; }. Dies verhindert, dass Rahmen und Abstände zur physischen Breite des Elements beitragen und das Element größer erscheint, als es sollte.
Negative Werte sind nicht erlaubt.
Ein border-image, das außerhalb der Border-Box gerendert wird, löst kein Scrollen aus. Überlappende Teile sind für Mausklicks unsichtbar und fangen keine Ereignisse ab.
Auch wenn sie niemals einen Scrollmechanismus auslösen, können Outset-Bilder immer noch von einem übergeordneten Element oder vom Viewport abgeschnitten werden.

Demo

Ändern Sie die Werte für border-image-outset, border-image-width und border-width unten, um zu sehen, wie jede Eingabe die Bildgröße beeinflusst.