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.

Initialwert	wie die jeweiligen Kurzschreibweisen: `border-image-source`: `none` `border-image-slice`: `100%` `border-image-width`: `1` `border-image-outset`: `0` `border-image-repeat`: `stretch`
Anwendbar auf	Alle Elemente, außer interne Tabellenelemente, falls `border-collapse` `collapse` ist. Auch anwendbar auf `::first-letter`.
Vererbt	Nein
Prozentwerte	wie die jeweiligen Kurzschreibweisen: `border-image-slice`: bezieht sich auf die Größe des Bildes `border-image-width`: bezieht sich auf die Größe des Rahmenbildbereichs
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `border-image-outset`: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers `border-image-repeat`: wie angegeben `border-image-slice`: ein bis vier Prozentwert(e) (wie angegeben) oder absolute Länge(n) plus das Schlüsselwort `fill`, falls angegeben `border-image-source`: `none` oder das Bild mit absoluter URI `border-image-width`: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstyp	diskret

Syntax

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

.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

BCD tables only load in the browser