CSS border-image egenskap

Definition och användning

border-image-egenskapen är en förenklad egenskap som används för att ställa in följande egenskaper:

Om värdet utesluts, sätts standardvärdet.

Tips:Använd border-image-*-egenskapen för att skapa vackra skalbara knappar!

Se också:

CSS3-tutorial:CSS3 kanter

Exempel

Ange bilden som omger ramen för div-elementet:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Prova själv

Det finns fler exempel längre ner på sidan.

CSS syntax

border-image: source slice width outset repeat|initial|inherit;

Egenskapsvärde

Värde Beskrivning Test
border-image-source Sökväg till bilden som används i ramen.
border-image-slice Inre offset för bildramen.
border-image-width Bredd på bildramen.
border-image-outset Mängden som bildramen överstiger ramen.
border-image-repeat Bör den bildramen铺满(repeated)、铺满(rounded)或拉伸(stretched). Test

Tekniska detaljer

Standardvärde: none 100% 1 0 stretch
Arvsförmåga: no
Version: CSS3
JavaScript syntax: object.style.borderImage="url(border.png) 30 30 rund"

Fler exempel

Border-image knappar
Detta exempel visar hur man skapar en knapp genom att använda border-image-egenskapen.

Webbläsarstöd

Talen i tabellen anger den första webbläsare som fullständigt stöder egenskapen.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-