CSS3 Border
CSS3 Border
Con CSS3, è possibile creare angoli arrotondati, aggiungere una casella di ombra, e come immagine del confine senza l'utilizzo di programmi di disegno come Photoshop.
In questo capitolo, imparerete le seguenti proprietà del bordo:
- border-radius
- box-shadow
- border-immagine
CSS3 angoli arrotondati
Aggiungere i filetti difficili nei CSS2. Abbiamo dovuto usare un'immagine diversa ogni angolo.
In CSS3, è molto facile creare angoli arrotondati.
Nel CSS3 proprietà border-radius viene utilizzato per creare angoli arrotondati:
Esempi
Aggiungere i filetti in un elemento div:
{
border:2px solid;
border-radius:25px;
}
Prova »
ombre box CSS3
La proprietà CSS3 box-shadow viene utilizzata per aggiungere un'ombra:
immagini CSS3 border
Con la proprietà CSS3 border-immagine, è possibile usare un'immagine per creare un bordo:
Utilizzare le immagini per creare div confine:
Esempi
Utilizzare le immagini per creare un div confine
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Prova »
Proprietà nuovo confine
| proprietà | spiegazione | CSS |
|---|---|---|
| border-immagine | Impostazione delle proprietà abbreviate bordo di tutte le immagini. | 3 |
| border-radius | Uno per impostare tutti e quattro border - * - proprietà raggio stenografia | 3 |
| box-shadow | Allegare una o più ombre casella a discesa | 3 |