Bordures CSS3 Border
Bordure CSS3
Avec CSS3, vous pouvez créer des bordures arrondies, ajouter des ombres portées et utiliser des images comme bordures sans utiliser de logiciels de design comme Photoshop.
Dans ce chapitre, vous allez apprendre les propriétés de bordure suivantes :
- border-radius
- box-shadow
- border-image
Coins arrondis CSS3
Ajouter des coins arrondis était délicat en CSS2. Nous devions utiliser différentes images pour chaque coin.
En CSS3, il est facile de créer des coins arrondis.
En CSS3, la propriété border-radius est utilisée pour créer des coins arrondis :
Exemple
Ajoutez des éléments à coins arrondis dans la div :
{
border:2px solid;
border-radius:25px;
}
Essayez-le vous-même »
Ombre de boîte CSS3
La propriété box-shadow en CSS3 est utilisée pour ajouter des ombres :
Exemple
Ajoutez la propriété box-shadow à la div
{
box-shadow: 10px 10px 5px #888888;
}
Essayez-le vous-même »
Images de bordure CSS3
Avec la propriété border-image de CSS3, vous pouvez utiliser une image pour créer une bordure :
Créez une bordure dans une div à l'aide d'une image :
Exemple
Créez une bordure dans une div à l'aide d'une image
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 et versions antérieures */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Essayez-le vous-même »
Nouvelles propriétés de bordure
| Propriété | Description | CSS |
|---|---|---|
| border-image | Définissez la propriété raccourcie pour toutes les images de bordure. | 3 |
| border-radius | Une propriété raccourcie pour définir les quatre propriétés border-*-radius | 3 |
| box-shadow | Attache une ou plusieurs ombres portées à la boîte. | 3 |