border-image-outset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

Die border-image-outset CSS Eigenschaft legt den Abstand fest, um den ein Element von seinem Border-Image von der Border-Box abgesetzt wird.

Die Teile des Border-Images, die außerhalb der Border-Box des Elements mit border-image-outset gerendert werden, lösen keine Überlauf-Scrollleisten aus und erfassen keine Mausereignisse.

Probieren Sie es aus

Syntax

css
/* <length> value */
border-image-outset: 1rem;

/* <number> value */
border-image-outset: 1.5;

/* top and bottom | left and right */
border-image-outset: 1 1.2;

/* top | left and right | bottom */
border-image-outset: 30px 2 45px;

/* top | right | bottom | left */
border-image-outset: 7px 12px 14px 5px;

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

Die border-image-outset Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden. Jeder Wert ist eine <length> oder <number>. Negative Werte sind ungültig und führen dazu, dass die border-image-outset Deklaration ignoriert wird.

  1. Wenn ein Wert angegeben ist, gilt er für alle vier Seiten.
  2. Wenn zwei Werte angegeben sind, gilt der erste für oben und unten und der zweite für links und rechts.
  3. Wenn drei Werte angegeben sind, gilt der erste für oben, der zweite für links und rechts, und der dritte für unten.
  4. Wenn vier Werte angegeben sind, gelten sie für oben, rechts, unten und links in dieser Reihenfolge (im Uhrzeigersinn).

Werte

<length>

Die Größe des border-image Outsets als Dimension — eine Zahl mit einer Einheit.

<number>

Die Größe des border-image Outsets als Vielfaches der entsprechenden border-widths des Elements. Zum Beispiel, wenn ein Element border-width: 1em 2px 0 1.5rem hat und border-image-outset: 2, würde das endgültige border-image-outset als 2em 4px 0 3rem berechnet werden.

Formale Definition

Initialer Wert0
Anwendbar aufAlle Elemente, außer interne Tabellenelemente, falls border-collapse collapse ist. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter Wertrelativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstypby computed value type

Formale Syntax

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

Beispiele

Ein Border-Image heraussetzen

HTML

html
<div id="outset">This element has an outset border image!</div>

CSS

css
#outset {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */
  margin: 2.1rem;
}

Ergebnis

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-outset

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch