border-image css3
Siden er opdateret d. 5. 9. 2015
Med border-image kan man indsætte et lille grafikbillede som border om et element. Det forudsætter bare, at man indsætter tilføjelsen -webkit- (for Chrome og Safari), for at få det til at fungere. I Firefox ogInternet Explorer virker det slet ikke.
#demo {
-webkit-border-image:url(border.png) 30 30 round; /* Chrome og Safari */
border-image:url(border.png) 30 30 round;
}
vil se sådan ud :
Noget tekst i en ramme med en grafisk border - grafikken gentaget.
Hvis du sætter sidste værdi til stretch:
#demo {
-webkit-border-image:url(border.png) 30 30 stretch; /* Chrome og Safari */
border-image:url(border.png) 30 30 stretch;
}
vil se sådan ud :
Noget tekst i en ramme med en grafisk border - grafikken strukket.
Den anvendte grafik:
De 2 mulige værdier er:
- round
- gentager borderbilledet indtil hele rammen er udfyldt
- stretch
- strækker borderbilledet indtil hele rammen er udfyldt
