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 das Border-Image eines Elements von der Begrenzungsbox seines Rahmens herausgesetzt wird.

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

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 Eigenschaft border-image-outset kann mit einem, zwei, drei oder vier Werten angegeben werden. Jeder Wert ist eine <length> oder ein <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 Outset als Dimension — eine Zahl mit einer Einheit.

<number>

Die Größe des border-image Outset 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äre das endgültige border-image-outset 2em 4px 0 3rem.

Formale Definition

Anfangswert0
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

Heraussetzen eines Border-Image

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