Immagini CSS3 Border
Con il CSS3 border-image proprietà, è possibile impostare un'immagine da usare come il bordo attorno a un elemento.
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- |
CSS3 border-image proprietà
Il CSS3 border-image proprietà consente di specificare un'immagine da utilizzare al posto del bordo normale intorno ad un elemento.
La struttura dispone di tre parti:
- L'immagine da utilizzare come confine
- Dove tagliare l'immagine
- Definire se le sezioni centrali devono essere ripetuti o allungati
Useremo questa immagine (chiamato "/css/border.png"):
Il border-image proprietà prende l'immagine e fette in nove sezioni, come una tavola tic-tac-toe. E poi mette gli angoli agli angoli, e le sezioni centrali si ripetono o allungato, come specificato.
Nota: per border-image di lavorare, l'elemento ha bisogno anche il border insieme di proprietà!
Qui, le sezioni centrali dell'immagine vengono ripetuti per creare il confine:
Un'immagine come bordo!
Ecco il codice:
Esempio
#borderimg
{
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 " Qui, le sezioni centrali dell'immagine sono allungati per creare il confine:
Un'immagine come bordo!
Ecco il codice:
Esempio
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
Prova tu stesso "  | Suggerimento: Il border-image proprietà è in realtà una proprietà scorciatoia per il border-image-source , border-image-slice , border-image-width , border-image-outset e border-image-repeat proprietà. |
|---|
CSS3 border-immagine - diversi valori Slice
Diversi valori fetta cambia completamente l'aspetto del confine:
Esempio 1:
border-image: url(border.png) 50 tondo;
Esempio 2:
border-image: url(border.png) 20% tondo;
Esempio 3:
border-image: url(border.png) 30% tondo;
Ecco il codice:
Esempio
#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 " Mettiti alla prova con esercizi!
Proprietà del bordo CSS3
| Proprietà | Descrizione |
|---|---|
| border-image | Una proprietà scorciatoia per settare tutti i border-image-* proprietà |
| border-image-source | Specifica il percorso per l'immagine da utilizzare come un bordo |
| border-image-slice | Specifica come tagliare l'immagine di confine |
| border-image-width | Specifica la larghezza dell'immagine del confine |
| border-image-outset | Specifica l'importo di cui l'area dell'immagine di confine si estende oltre il bordo casella |
| border-image-repeat | Specifica se l'immagine di confine deve essere ripetuto, arrotondato o allungato |