Proprietà CSS border-image
Esempio
Specifica un'immagine come bordo attorno a un elemento:
#borderimg {
border-image: url(border.png) 30 round;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La border-image
proprietà consente di specificare un'immagine da utilizzare come bordo attorno a un elemento.
La proprietà border-image è una proprietà abbreviata per:
- bordo-origine-immagine
- bordo-immagine-fetta
- bordo-larghezza-immagine
- bordo-immagine-inizio
- bordo-immagine-ripeti
I valori omessi vengono impostati sui valori predefiniti.
Valore di default: | nessuno 100% 1 0 allungamento |
---|---|
Ereditato: | no |
Animabile: | no. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.borderImage="url(border.png) 30 round" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit-, -moz- o -o- specificano la prima versione che ha funzionato con un prefisso.
Property | |||||
---|---|---|---|---|---|
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 il supporto del singolo browser per ogni valore di seguito.
Sintassi CSS
border-image: source slice width outset repeat|initial|inherit;
Valori di proprietà
Value | Description | Play it |
---|---|---|
border-image-source | The path to the image to be used as a border | |
border-image-slice | How to slice the border image | |
border-image-width | The width of the border image | |
border-image-outset | The amount by which the border image area extends beyond the border box | |
border-image-repeat | Whether the border image should be repeated, rounded or stretched | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Diversi valori di fetta cambiano completamente l'aspetto del bordo:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
Pagine correlate
Tutorial CSS: Immagini di bordo CSS
Riferimento CSS: proprietà border-image-outset
Riferimento CSS: proprietà border-image-repeat
Riferimento CSS: proprietà border-image-slice
Riferimento CSS: proprietà border-image-source
Riferimento CSS: proprietà border-image-width
Riferimento HTML DOM: proprietà borderImage