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 Rahmenbild eines Elements von dessen Rahmenkasten nach außen versetzt wird.

Die Teile des Rahmenbilds, die mit border-image-outset außerhalb des Rahmenkastens eines Elements angezeigt werden, lösen keine Überlauf-Scrollbars aus und fangen keine Mausereignisse ab.

Probieren Sie es aus

border-image-outset: 0;

border-image-outset: 15px;

border-image-outset: 30px;

border-image-outset: 40px;

<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: #000;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

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 ein <length> oder <number>. Negative Werte sind ungültig und führen dazu, dass die Deklaration border-image-outset 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 in der Reihenfolge oben, rechts, unten und links (im Uhrzeigersinn).

Werte

<length>

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

<number>

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

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

Ein Rahmenbild nach außen setzen

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

Siehe auch