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.

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:

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:

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:

Spezifikation

Browser Kompatibilität

• [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.