CSS3 border-image Property

Esempio

Specificare un'immagine come il bordo attorno a un elemento:

#borderimg {
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

Prova tu stesso "

Più "Try it Yourself" esempi di seguito.

Definizione e utilizzo

La proprietà border-image permette di specificare un'immagine da utilizzare al posto del bordo normale intorno ad un elemento.

La proprietà border-immagine è una proprietà scorciatoia per settare i border-immagine-source , border-image-fetta , border-image-width , border-image-fin dall'inizio elementi e border-image-repeat proprietà.

I valori omessi vengono impostati ai valori predefiniti.

Valore di default:	none 100% 1 0 stretch
Inherited:	no
animatable:	no. Read about animatable
Versione:	CSS3
sintassi JavaScript:	object .style.borderImage="url(border.png) 30 round" Try it

Supporto per il browser

I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.

Numeri seguiti da -webkit-, -moz-, o -o- specificare la prima versione che ha lavorato con un prefisso.

Proprietà
border-image	16,0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

Nota: Vedere sostegno individuale del browser per ogni valore di seguito.

CSS Sintassi

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

I valori delle proprietà

Valore	Descrizione	Gioca
border-image-source	Il percorso dell'immagine da utilizzare come un bordo
border-image-slice	Come tagliare l'immagine di confine	Gioca "
border-image-width	La larghezza dell'immagine confine
border-image-outset	L'importo di cui l'area dell'immagine di confine si estende oltre il bordo casella
border-image-repeat	Se l'immagine di confine deve essere ripetuto, arrotondate o allungato	Gioca "
initial	Consente di impostare questa proprietà al suo valore di default. Leggi iniziale
inherit	Eredita questo immobile dal suo elemento genitore. Leggi su erediterà

Altri esempi

Esempio

Diversi valori fetta cambia completamente l'aspetto del confine:

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}

Prova tu stesso "