CSS3 - Rahmen - Bilder - Die Details
1. border-image-source
Ist dasselbe Schema wie bei der background-Eigenschaft. Also zum Beispiel so.
.border {
border-image-source: url(../../pics/css/bgimage.gif);
}
2. border-image-slice
Das Prinzip solltet ihr ja verstanden haben. Hier legt man die "Koordinaten" nach dem altbekannten Schema "oben-rechts-mitte-links" fest. Die Feinheiten kommen gleich.
.border {
border-image-slice: 15 20 10 30;
}
Gibt man nur einen Wert an, so gilt das für alle Bereiche, bei zweien für oben sowie unten, und was das mit den drei Angaben auf sich hat, ... das konnte ich mir noch nie merken (PS: bitte keine Mails dazu schicken, das geht bei mir zum einen Ohr hinein und zum anderen wieder raus).
3. border-image-width (optional)
Überschreibt(!) die Dicke des Rahmens, die per border festgelegt wurde.
.border {
border-images-width: 25px;
}
4. border-image-outset (optional)
Damit kann man einen zusätzlichen Abstand des Rahmens zum Inhalt festlegen. Aber obacht! Das wird zur Gesamtbreite hinzugezählt! Und zwar unabhängig zu dem Platz,
der zur Verfügung steht. Es kann also durchaus sein, dass das Element dann aus dem Raster herausragt. In dem Fall muss man mit einem entsprechenden margin
nachkorrigieren.
.border {
border-images-outset: 10px;
}
5. border-image-repeat
Legt den "Kachelmodus" für die Slices fest. Dabei gibt es die drei folgenden Werte.
stretchzieht den Slice des Bildes komplett in die Breite oder Höhe.repeatkachelt den Slice des Bildes horizontal oder vertikal.-
roundkachelt den Slice des Bildes horizontal oder vertikal. Arbeitet aber deutlich besser alsrepeat, weil es Zwischenabstände berücksichtigt. Letzteres dagegen schneidet Bilder auch gerne mal ab. Und das sieht nicht so toll aus.
6. border-image
Ist dann einfach nur die Kurzform. Sie baut sich nach folgendem Schema auf.
[source][slice][width][outset][repeat]
Allerdings müsst ihr dabei auf einige Dinge achten, aber zu denen komme ich jetzt.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt