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;
}

Zusätzliche Eigenschaften

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

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

Diese Kurzform-Eigenschaft wird durch die CSS border Kurzschreibweise zurückgesetzt, wobei alle Langform-Eigenschaften auf ihre Anfangswerte 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 ein bis fünf der unten aufgeführten Werte spezifiziert werden.

Werte

<'border-image-source'>

Die Quelle des Bildes. Siehe border-image-source.

<'border-image-slice'>

Die Abmessungen zum Schneiden des Quellbilds in Regionen. Es können bis zu vier Werte angegeben werden. Siehe border-image-slice.

<'border-image-width'>

Die Breite des Randbilds. Es können bis zu vier Werte angegeben werden. Siehe border-image-width.

<'border-image-outset'>

Die Entfernung des Randbilds von der äußeren Kante des Elements. Es können bis zu vier Werte angegeben werden. Siehe border-image-outset.

<'border-image-repeat'>

Definiert, wie die Kantenregionen des Quellbilds angepasst werden, um die Abmessungen des Randbilds anzupassen. Es können bis zu zwei Werte angegeben werden. Siehe border-image-repeat.

Barrierefreiheit

Hilfstechnologien können Randbilder nicht interpretieren. Wenn das Bild Informationen enthält, die entscheidend für das Verständnis des Gesamtzwecks der Seite sind, ist es besser, es semantisch im Dokument zu beschreiben.

• MDN Verständnis von WCAG, Erklärung der Richtlinie 1.1
• Verständnis des Erfolgskriteriums 1.1.1 | Verständnis von 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 mit 81 x 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 oder 27, um das Bild in Eck- und Kantenbereiche zu schneiden. Um das Randbild in der Mitte der Kante des Hintergrunds des Elements zu zentrieren, setzen wir die Überstandswerte gleich der Hälfte der Breitenwerte. Schließlich wird ein Wiederholungswert von round die Randschnitte gleichmäßig passen, d.h. ohne Abschneiden 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 in der Lage ist, das Bild außerhalb der Randbox zu platzieren, sodass es keinen Sinn macht, dass das Randbild durch den Randbereich abgeschnitten wird. Um abgerundete Ränder bei Verwendung eines Randbilds zu erstellen, sollten Sie das Bild selbst mit abgerundeten Ecken erstellen oder, im Falle eines Verlaufs, es stattdessen als Hintergrund zeichnen. Unten zeigen wir einen Ansatz, dies zu tun, indem zwei background-images verwendet werden: eines, das die Randbox erweitert, und ein weiteres für die Polsterbox.

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
• Verlauf-Funktionen: 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)