border-image CSS-Eigenschaft

Probieren Sie es aus

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 /
  19px round;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
  fill / 30px / 30px space;

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;

border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px)
  60;

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

Bestandeigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width

Diese Kurzschreibweise wird zurückgesetzt, indem die Langschreibweisen auf ihre Initialwerte durch die CSS border Kurzschreibweise gesetzt werden.

Syntax

/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

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

Die border-image Eigenschaft kann mit einem bis zu fünf der unten aufgeführten Werte angegeben werden.

Werte

<'border-image-source'>

Das Quellbild. Siehe border-image-source.

<'border-image-slice'>

Die Dimensionen zum Zerschneiden des Quellbildes in Regionen. Bis zu vier Werte können angegeben werden. Siehe border-image-slice.

<'border-image-width'>

Die Breite des Randbildes. Bis zu vier Werte können angegeben werden. Siehe border-image-width.

<'border-image-outset'>

Der Abstand des Randbildes von der Außenkante des Elements. Bis zu vier Werte können angegeben werden. Siehe border-image-outset.

<'border-image-repeat'>

Definiert, wie die Randbereiche des Quellbildes angepasst werden, um die Dimensionen des Randbildes zu erfüllen. Bis zu zwei Werte können angegeben werden. Siehe border-image-repeat.

Barrierefreiheit

Assistive Technologien können Randbilder nicht analysieren. Wenn das Bild Informationen enthält, die zum Verstehen der gesamten Seite wichtig sind, ist es besser, es semantisch im Dokument zu beschreiben.

• MDN Verständnis WCAG, Richtlinie 1.1 Erklärungen
• Verständnis der Erfolgskriterium 1.1.1 | Verständnis WCAG 2.0

Formale Definition

Formale Syntax

border-image = 
  <'border-image-source'>                             ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||
  <'border-image-repeat'>                             

<border-image-source> = 
  none     |
  <image>  

<border-image-slice> = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?                                         

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

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

<border-image-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<length-percentage> = 
  <length>      |
  <percentage>  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Beispiele

Bitmap

In diesem Beispiel werden wir ein Diamantmuster auf die Ränder eines Elements anwenden. Die Quelle für das Randbild ist eine ".png"-Datei von 81 mal 81 Pixeln, mit drei Diamanten vertikal und horizontal:

HTML

<div id="bitmap">
  This element is surrounded by a bitmap-based border image!
</div>

CSS

Um die Größe eines einzelnen Diamanten anzupassen, verwenden wir einen Wert von 81 geteilt durch 3, also 27, um das Bild in Eck- und Randregionen zu schneiden. Um das Randbild auf der Grenze des Hintergrunds des Elements zentriert zu halten, setzen wir die Überstandswerte gleich der Hälfte der Breitenwerte. Schließlich lässt ein Wiederholungswert von round die Randstücke gleichmäßig passen, d.h. ohne Zuschneiden oder Lücken.

#bitmap {
  width: 200px;
  background-color: #ffffaa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
}

Ergebnis

Verlauf

HTML

<div id="gradient">
  This element is surrounded by a gradient-based border image!
</div>

CSS

#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #ff3333, #33bbff, #ff3333 30px)
    60;
  padding: 20px;
}

Ergebnis

Abgerundete Ränder

border-radius hat keine Auswirkung auf das Randbild. Dies liegt daran, dass border-image-outset das Bild außerhalb des Randbereichs platzieren kann, sodass es keinen Sinn macht, dass das Randbild durch den Randbereich abgeschnitten wird. Um abgerundete Ränder zu erstellen, wenn ein Randbild verwendet wird, sollten Sie das Bild selbst mit abgerundeten Ecken erstellen oder im Falle eines Verlaufs es als den Hintergrund zeichnen. Unten zeigen wir einen Ansatz, um dies zu tun, indem zwei background-images verwendet werden: eines, das die Kante des Randkastens erweitert, und ein weiteres für den Innenabstandskasten.

HTML

<div id="rounded">
  This element is surrounded by a border image with rounded corners!
</div>

CSS

#rounded {
  width: 200px;
  /* Use transparent so the background image is visible */
  border: 10px solid transparent;
  padding: 20px;
  border-radius: 20px;
  background-image:
    linear-gradient(white, white), linear-gradient(to right, cyan, lime);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• border
• outline
• box-shadow
• background-image
• <url> Typ
• Gradientenfunktionen: conic-gradient(), repeating-conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()
• Randbilder in CSS: Ein Schwerpunktbereich für Interop 2023 auf dem MDN Blog (2023)