HTML5-Handbuch - die neuen Features von HTML5

als dessen Rahmen sie dienen soll. Grafiken wie die des Beispiels eignen sich insofern gut, weil sie für alle Bereiche des Rahmens, nämlich für die vier Ecken und die vier Seiten, klar definierte, gleich große, quadratische Bereiche enthält. Die quadratische Grafik hat eine Gesamtseitenlänge von 96 Pixeln. Jede Rahmenecke und jede -strecke dazwischen hat demzufolge ein Drittel davon, also 32 Pixel.
    Das obige Code-Beispiel zeigt, wie die Grafik in Verbindung mit der
border-image
-Eigenschaft eingesetzt werden kann. Wichtig ist, dass eine geeignete Rahmendicke definiert wird. Das geschieht in den Beispielen mit Hilfe von
border-width:
32px;
. Dies ist genau das Ausmaß der Teilquadrate der Rahmengrafik.
    Die zusammenfassende
border-image
-Eigenschaft, wie sie im obigen Beispiel verwendet wird, erwartet mehrere Werte (derzeit typischerweise drei). Der eine ist eine Referenz auf die Rahmengrafik und entspricht der Einzeleigenschaft
border-image-source
. Wie auch bei anderen CSS-Eigenschaften werden solche Referenzen durch
url(URL-Adresse)
notiert. Bei der URL-Adresse gelten alle Regeln und Möglichkeiten der Referenzierung, wie sie in Abschnitt 2.1.5 Referenzierung beschrieben sind .
    Eine weitere Angabe besteht aus einem bis maximal vier nummerischen Werten. Im obigen Beispiel ist das einfach die Zahl 32, welche für 32 Pixel steht (die Seitenlänge der Einzelelemente der Beispielrahmengrafik). Diese ein bis vier Werte entsprechen der Einzeleigenschaft
border-image-slicing
und bestimmen die Art, wie die Rahmengrafik zerteilt wird.
•   Eine Angabe bedeutet: Der Wert gilt für alle vier Seiten.
•   Bei zwei Angaben bezeichnet die erste Angabe den Abstand von oben und unten, die zweite Angabe den Abstand von rechts und links.
•   Bei drei Angaben bezeichnet die erste Angabe den Abstand von oben, die zweite den Abstand von rechts und links und die dritte den Abstand von unten.
•   Bei vier Angaben bezeichnet die erste Angabe den Abstand von oben, die zweite den Abstand von rechts, die dritte den Abstand von unten und die vierte den Abstand von links.
    Stellen Sie sich, um diese Angaben besser zu verstehen, vor, Sie zerschneiden die obige Beispielrahmengrafik so, dass für jede der vier Rahmenseiten und die vier Rahmenecken jeweils ein Element entsteht. Sie beginnen beispielsweise damit, das obere Drittel der Grafik abzuschneiden. Dann ist die Höhe des Papierstreifens das, was hier als Abstand von oben bezeichnet wird. Ebenso verhält es sich mit den übrigen Schnitten.
    Zahlen ohne Maßeinheit werden als Pixel interpretiert. Auch Prozentangaben sind möglich. Dabei ist die Breite bzw. Höhe der Rahmengrafik der 100%-Bezug. Außerdem gibt es noch die Möglichkeit, das Schlüsselwort
fill
zuzuweisen. In diesem Fall wird der mittlere Teil der Grafik (in der Beispielgrafik oben das weiße Quadrat im Zentrum) mit berücksichtigt, um den Elementinhalt ähnlich wie eine Hintergrundgrafik zu füllen.
    Die dritte Angabe bestimmt, wie die Seitenlängen der Rahmengrafik auf die tatsächlichen Seitenlängen des HTML-Elements übertragen werden sollen. Werfen Sie zum Verständnis nochmals einen Blick auf die obige Beispielrahmengrafik. Deren Quadrate für die Seitenlängen haben wie die übrigen Quadrate ein Ausmaß von 32 mal 32 Pixeln. Angenommen, das HTML-Element, auf das die Rahmengrafik angewendet wird, ist 500 Pixel breit und 356 Pixel hoch. Es müssen also irgendwie die 32 Pixel Seitenlänge auf 500 Pixel und 356 tatsächliche Seitenlängen gebracht werden. Eine Möglichkeit besteht darin, die 32 Pixel periodisch zu wiederholen. Wenn Sie das möchten, weisen Sie
repeat
( wiederholen ) als Wert zu. Eine andere Möglichkeit ist, die 32 Pixel auf die tatsächliche Länge zu strecken – dies geschieht durch die Wertzuweisung
stretch
( strecken ). Die beiden
div
-Bereiche im obigen Beispiel unterscheiden sich in den Angaben zu dieser Eigenschaft.
border-image-generator
Da das manuelle Definieren von grafischen Rahmen doch einiges Abstraktionsvermögen verlangt, sei auf einen Web-Service verwiesen, mit dessen Hilfe sich grafische Rahmen bequem interaktiv gestalten lassen:
http://border-image.com/
Referenzinformationen
    CSS-Eigenschaften
border-image
:

    Die Eigenschaft wird zwar von allen den genannten Browsern unterstützt, aber nur mit den proprietären Präfixes, der jeweiligen Engine.
14.6.4    Funktionsrahmen (outline)
    Funktionsrahmen können Sie wahlweise mit der zusammenfassenden