Immagini del bordo CSS
Immagini del bordo CSS
Con la proprietà CSS border-image
, puoi impostare un'immagine da utilizzare come bordo attorno a un elemento.
Proprietà CSS border-image
La proprietà CSS border-image
consente di specificare un'immagine da utilizzare al posto del normale bordo attorno a un elemento.
L'immobile si compone di tre parti:
- L'immagine da utilizzare come bordo
- Dove tagliare l'immagine
- Definire se le sezioni centrali devono essere ripetute o allungate
Useremo la seguente immagine (chiamata "border.png"):
La border-image
proprietà prende l'immagine e la divide in nove sezioni, come un tris. Quindi posiziona gli angoli agli angoli e le sezioni centrali vengono ripetute o allungate come specificato.
Nota: per border-image
funzionare, l'elemento necessita anche del
border
set di proprietà!
Qui, le sezioni centrali dell'immagine vengono ripetute per creare il bordo:
Un'immagine come confine!
Ecco il codice:
Esempio
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
Qui, le sezioni centrali dell'immagine vengono allungate per creare il bordo:
Un'immagine come confine!
Ecco il codice:
Esempio
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
Suggerimento: la border-image
proprietà è in realtà una proprietà abbreviata per le
proprietà border-image-source
, border-image-slice
, border-image-width
e
.border-image-outset
border-image-repeat
CSS border-image - Diversi valori di sezione
Diversi valori di fetta cambiano completamente l'aspetto del bordo:
Esempio 1:
border-image: url(border.png) 50 round;
Esempio 2:
border-image: url(border.png) 20% rotondo;
Esempio 3:
border-image: url(border.png) 30% rotondo;
Ecco il codice:
Esempio
#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;
}
Proprietà immagine bordo CSS
Property | Description |
---|---|
border-image | A shorthand property for setting all the border-image-* properties |
border-image-source | Specifies the path to the image to be used as a border |
border-image-slice | Specifies how to slice the border image |
border-image-width | Specifies the widths of the border image |
border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |