CSS/Eigenschaften/äußere Gestaltung/Rahmen/border-image

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit den Rahmenbildeigenschaften können Sie ein Bild festlegen, das – in Einzelteile zerlegt – in den Rahmenbereichen eines Elements angezeigt wird. Dieses Bild ersetzt eine „gewöhnliche“ Rahmenlinie, die mit border definiert ist und überdeckt auch den Hintergrund des Elements.

Inhaltsverzeichnis

[Bearbeiten] border-image

Die Eigenschaft border-image ist die Zusammenfassung der Einzelangaben border-image-source, border-image-slice, border-image-width, border-image-outset und border-image-repeat. Die Werte werden dabei mit Leerzeichen voneinander getrennt.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>border-image</title>
    <style>
      p { padding: 2em; width: 20em; border: solid #aaa; border-width: 99px 102px; }
      .stretch { border-image: url(Border-image.png) 99 102 stretch; }
      .repeat  { border-image: url(Border-image.png) 99 102 repeat; }
      .space   { border-image: url(Border-image.png) 99 102 space; }
      .round   { border-image: url(Border-image.png) 99 102 round; }
    </style>
  </head>
  <body>
    <p class="stretch">Textabsatz mit stretch.</p>
    <p class="repeat">Textabsatz mit repeat.</p>
    <p class="space">Textabsatz mit space.</p>
    <p class="round">Textabsatz mit round.</p>
  </body>
</html>
Das Beispiel verwendet dieses Bild:

screenshot

Abgeschnitten wird jeweils bei 99 Pixeln ab der Ober- und Unterkante, und bei 102 Pixeln ab der rechten und linken Kante, so dass sich die folgenden neun Teilbereiche ergeben:

Screenshot Teilbereiche



[Bearbeiten] border-image-source

Mit border-image-source legen Sie das Bild fest, das als Rahmenbild verwendet werden soll. Der Wert ist ein URI in der Form url(Pfad-zum-Bild), wobei Pfad-zum-Bild durch die relative oder absolute Adresse des Bildes ersetzt wird.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

[Bearbeiten] border-image-slice

Mit border-image-slice legen Sie fest, wie das Bild in Einzelteile zerschnitten wird. Sie können bis zu vier Werte angeben, die den Abstand des Schnitts zum jeweiligen Rand beschreiben. Erlaubt sind entweder Zahlen oder Prozentwerte.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Zahlen beziehen sich auf die internen Einheiten des jeweiligen Bildes, also Pixel bei Rastergrafiken wie PNG, JPG oder GIF, oder Vektor-Koordinaten in Vektorgrafiken wie z.B. SVG. Prozentwerte beziehen sich auf die Größe des Bildes, d.h. die Werte für oben und unten auf die Höhe und diejenigen für rechts und links auf die Breite.

Sie können einen bis vier Werte angeben. Dabei gelten folgende Regeln:

  • Eine Angabe: für alle 4 Schnitte gilt derselbe Abstand
  • Zwei Angaben: 1. Wert Abstand von oben und unten, 2. Wert Abstand von links und rechts
  • Drei Angaben: 1. Wert Abstand von oben, 2. Wert Abstand für links und rechts, 3. Wert Abstand von unten
  • Vier Angaben: 1. Wert Abstand von oben, 2. Wert Abstand von rechts, 3. Wert Abstand von unten, 4. Wert Abstand von links.

Screenshot

Zusätzlich kann der Wert fill angegeben werden. Dieser bewirkt, dass das mittlere Teilstück über den Hintergrund des Elements gezeichnet wird. Wenn Sie fill weglassen, wird das mittlere Teilstück verworfen.

Beachten Sie: Firefox verhält sich bis einschließlich Version 15 so, als ob fill gesetzt ist, d.h. er zeichnet das mittlere Teilstück über den Hintergrund. Wenn sie möchten, dass der eigentliche Hintergrund sichtbar bleibt, müssen Sie dafür sorgen, dass das mittlere Teilstück des Rahmenbildes transparent ist.

[Bearbeiten] border-image-width

Mit border-image-width können Sie den Bereich festlegen, in dem das Rahmenbild gezeichnet wird. Die Einzelteile des Bildes werden dann entsprechend skaliert. Bezüglich der möglichen Werte enthält die Spezifikation noch Fragen, und border-image-width wird derzeit noch von keinem Browser interpretiert.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

[Bearbeiten] border-image-outset

Mit border-image-outset können Sie festlegen, wie weit das Rahmenbild aus dem eigentlichen Rahmen herausragen soll. Das Element wird dabei nicht vergrößert, so dass Überlappungen mit Nachbarelementen realisiert werden können. Diese Eigenschaft wird allerdings derzeit noch von keinem Browser interpretiert.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

[Bearbeiten] border-image-repeat

Mit border-image-repeat legen Sie fest, ob und wie die vier Bildteile in den Seitenrändern wiederholt werden.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Mögliche Werte sind:

  • repeat, Wiederholung, Bildteile werden nicht verändert, Einzelbilder am Anfang und Ende werden ggf. abgeschnitten
  • space, Wiederholung, Bildteile werden nicht verändert, ggf. zusätzlicher Platz wird zwischen den Einzelbildern verteilt
  • round, Wiederholung, Bildteile werden so in der Größe verändert, dass keines am Ende abgeschnitten wird
  • stretch, keine Wiederholung, sondern Streckung.

[Bearbeiten] Anwendungsbeispiel

[Bearbeiten] linear-Gradient als Hintergrundbild

Sie können einen Rahmen auch mit einem Farbverlauf einfärben.

Beispiel ansehen …
.rahmen_mit_verlauf {
  border-top: 2em solid #dfac20;;
  border-bottom: 2em solid #c32e04;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 2em 100%;
  background-image: linear-gradient(to bottom, #dfac20 0%, #c32e04 100%), 
                    linear-gradient(to bottom, #dfac20 0%, #c32e04 100%);
}
In diesem Beispiel werden Rahmen nur oben (border-top) und unten (border-bottom) in jeweils einer Farbe festgelegt. Anstelle eines rechten und linken Rahmens wird mit background-image ein Hintergrundbild mit einem Farbverlauf verwendet, dass dann mit background-size passend skaliert wird.


Achtung!

Die Eigenschaft border-image ist derzeit (Stand: August 2016) noch nicht in alle aktuelle Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Opera-Mini -o-border-image

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML