Dieborder-image-outsetCSS Eigenschaft legt den Abstand fest, um den dasRandelementbild von seinem Randbereich gesetzt wird.

Die Teile des Randelementbildes, die außerhalb des Randbereichs des Elements mitborder-image-outset gerendert werden, lösen keine Überlauf-Scrollleisten aus und erfassen keine Mausereignisse.

Probieren Sie es aus

border-image-outset: 0;

border-image-outset: 15px;

border-image-outset: 30px;

border-image-outset: 40px;

<section>  <div>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: black;  border: 30px solid;  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30    round;  font-size: 1.2em;}

Syntax

/* <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 Eigenschaftborder-image-outset kann mit einem, zwei, drei oder vier Werten angegeben werden. Jeder Wert ist entweder ein<length> oder ein<number>. Negative Werte sind ungültig und führen dazu, dass dieborder-image-outset-Angabe ignoriert wird.

1. Wennein Wert angegeben ist, gilt er füralle vier Seiten.
2. Wennzwei Werte angegeben sind, gilt der erste füroben und unten und der zweite fürlinks und rechts.
3. Wenndrei Werte angegeben sind, gilt der erste füroben, der zweite fürlinks und rechts und der dritte fürunten.
4. Wennvier Werte angegeben sind, gelten sie füroben,rechts,unten undlinks in dieser Reihenfolge (im Uhrzeigersinn).

Werte

<length>

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

<number>

Die Größe desborder-image-Outsets als Vielfaches der entsprechendenborder-widths des Elements. Wenn ein Element zum Beispielborder-width: 1em 2px 0 1.5rem hat undborder-image-outset: 2, würde der endgültigeborder-image-outset als2em 4px 0 3rem berechnet.

Formale Definition

Formale Syntax

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

Beispiele

Erweiterung eines Randelementbildes

HTML

<div>This element has an outset border image!</div>

CSS

#outset {  width: 10rem;  background: #cceeff;  border: 1.4rem solid;  border-image: radial-gradient(#ffff22, #5555ff) 40;  border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */  margin: 2.1rem;}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Hintergründe und Ränder
• CSS lernen: Hintergründe und Ränder
• Randelementbilder in CSS: Ein Schlüsselbereich für Interop 2023 auf dem MDN-Blog (2023)