Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

border-image

Übersicht

Die border-image CSS Eigenschaft ermöglicht das Zeichnen eines Bildes an den Rändern eines Elements. Dies vereinfacht das Zeichnen von komplex wirkenden Widgets deutlich und macht den Gebrauch von neun Kästen um das Element für einige Fälle überflüssig.

border-image wird anstatt der Randstile benutzt, die durch die border-style Eigenschaft definiert werden. Es ist wichtig, anzumerken, dass, wenn der berechnete Wert von border-image-source, welcher entweder durch border-image-source oder die Kurzschreibweise border-image gesetzt werden kann, none ist, oder falls das Bild nicht angezeigt werden kann, die Randstile verwendet werden.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufwie die jeweiligen Kurzschreibweisen:
. Auch anwendbar auf ::first-letter.
VererbtNein
Prozentwertewie die jeweiligen Kurzschreibweisen:
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
AnimierbarNein
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

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

Werte

Siehe die entsprechenden Eigenschaften der verschiedenen Werte.

Beispiele

Bild wiederholt (repeat)

Das bild wird aufgeteilt und einfach gekachelt, um den Randbereich zu füllen.

.beispiel { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}

Ergibt:
Beispiel für border-image: repeat

Bild wiederholt (round)

Die Option round ist eine Variante der repeat Option, die die Kacheln so verteilt, dass die Enden sauber verbunden sind.

.beispiel { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}

Ergibt:
Beispiel für border-image: round

Bild gestreckt

Die stretch Option streckt die Bilder, um den Randbereich zu füllen.

.beispiel { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}

Ergibt:
Beispiel für border-image: stretch

Spezifikation

Spezifikation Status Kommentar
CSS Backgrounds and Borders Module Level 3
Die Definition von 'border-image' in dieser Spezifikation.
Anwärter Empfehlung  

Browser Kompatibilität

Merkmal Firefox (Gecko) Chrome Internet Explorer Opera Safari
Grundlegende Unterstützung

3.5 (1.9.1)-moz [1]

Without prefix since 15 (15)

7.0-webkit

Without prefix since 16.0

11

10.5 / 11.0-o [2]

Without prefix since 15.0

3.0-webkit

Without prefix since 6.0

optionales <border-image-slice> 15 (15) ? ? ? ?
fill Schlüsselwort 15 (15) Yes ? Nicht unterstützt Yes (6)
Merkmal iOS Safari Opera Mini Opera Mobile Android Browser
Grundlegende Unterstützung

3.2-webkit

Without prefix since 15.0 (15)

Nicht unterstützt 11.0-o 2.1-webkit
optionales <border-image-slice> 15.0 (15) Nicht unterstützt ? ?
fill Schlüsselwort 15.0 (15) Nicht unterstützt Nicht unterstützt Yes(18)
  • [1] Eine frühere Version dieser Spezifikation wurde in Gecko Versionen vor 15 mit Präfix implementiert.
  • [2] In Opera wurde die Eigenschaft mit Präfix nach der ohne Präfix hinzugefügt.

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: teoli, Sebastianz, tyrann0us
 Zuletzt aktualisiert von: teoli,