CSS3 - Rahmen - Bilder - Feinheiten

1. Angaben zum Rahmen

Hier gibt es ein paar wichtige Details zu beachten, die ich bisher verschwiegen habe.

Wenn ein Browser mit border-image nicht klarkommt, so übernimmt er einfach die Angaben aus der normalen border-Eigenschaft
Ist die Rahmendicke (border-width oder border-image-width) anders als die angegebenen Bildausschnitte, so werden letztere automatisch skaliert. Man kann also zum Beispiel bei einen Bild mit 27-Pixel-Schema durchaus einen Dicke von 10 Pixeln angeben. Dann werden die einzelnen Elemente entsprechend kleiner dargestellt.
Das alles gilt natürlich auch für einen Rahmen, wo die einzelnen Bereiche unterschiedlich dick sind.

2. Maßeinheiten

Hier wird es ebenfalls etwas kompliziert. Es gelten dabei folgenden Regeln, die für drei Eigenschaften gelten.

Eigenschaft	Zahl	Zahl + `px`/`em`	Prozent
`border-image-slice`
`border-image-width`
`border-image-outset`

Das ist jetzt mal wieder eine der Sachen, die ich an Spezifikationen so liebe. Gibt man keine Maßeinheit sondern nur eine nackte Zahl an, so gelten die folgenden Regeln.

border-image-slice Angabe in Pixel
border-image-width [Dicke des Wertes aus border-width] X [Angabe] = [Gesamtdicke des Bilderrahmens]
border-image-outset [Dicke des Wertes aus border-width] X [Angabe] = [Gesamtabstand des Inhalts]

3. Unterschiedliche Rahmenangaben

Bei border hat man ja die Möglichkeit, für die Bereiche oben, links, rechts und unten verschiedene Angaben zur Größe zu machen. Und das funktioniert natürlich auch bei border-image-slice, border-image-width und border-image-outset. Die Reihenfolge und Anzahl der Werte ist dann wie gewohnt.

4. Die Kurzschreibweise

Auf das Problem bei unterschiedlichen Eigenschaften mit gleichen Werten habe ich ja schon hier unter Punkt drei hingewiesen. Und das gilt natürlich auch in diesem Fall. Also werden die Angaben zu slice, width und outset durch einen Schrägstrich getrennt.


             [source]       [slice] [width] [outset][repeat]
border-image: url(bild.gif)  10    / 10px  / 5px     round;

5. Der Opera und der Safari

Seien wir froh, dass beide mit dem border-image zurechtkommen. Aber trotzdem haben beide einen ordentlichen Hau weg.

Der Safari

... hat damit überhaupt keine Probleme, so lange man nicht die Kurzschreibweise benutzt. Denn in dem Fall benötigt der das schon erwähnte Vendor-Präfix -webkit-. Da auch der Chrome das versteht, sollte man die originären Anweisungen immer an das Ende einer Selektor-Definition setzen. Ach ja, die Angaben beziehen sich auf den 5.1 für PC. Den 6er gibt es derzeit noch nicht für Windows (*).

* Und wehe, jetzt kommt einer an mit "get a Mac". Njet!

Der Opera

... ist noch ein wenig verrückter. Denn der beherrscht nur die Kurzform. Und das ebenfalls auch nur mit dem Präfix -o-. Zudem kommt er mit outset nicht klar. Also muss man diese Angabe bei dem weglassen, denn sonst versteht der nur Bahnhof und stellt das dar, was bei border festgelegt wurde.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt