CSS3 Border
CSS3 Border
Avec CSS3, vous pouvez créer des coins arrondis, ajouter une zone d'ombre, et comme l'image de la frontière sans l'aide de programmes de conception tels que Photoshop.
Dans ce chapitre, vous apprendrez les propriétés de bordure suivantes:
- border-radius
- box-shadow
- frontière image
CSS3 coins arrondis
Ajouter les filets délicats dans CSS2. Nous avons dû utiliser une autre image de chaque coin.
En CSS3, il est très facile de créer des coins arrondis.
Dans le CSS3 propriété border-radius est utilisé pour créer des coins arrondis:
Exemples
Ajouter les filets dans un élément div:
{
border:2px solid;
border-radius:25px;
}
Essayez »
box CSS3 ombres
La propriété CSS3 box-shadow est utilisé pour ajouter une ombre:
Exemples
Ajouter la propriété box-shadow dans la div
{
box-shadow: 10px 10px 5px #888888;
}
Essayez »
photos CSS3 frontalières
Avec la propriété CSS3 border-image, vous pouvez utiliser une image pour créer une bordure:
Utiliser des images pour créer div frontière:
Exemples
Utiliser des images pour créer un div frontière
{
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 */
}
Essayez »
Nouvelles propriétés frontalières
| propriété | explication | CSS |
|---|---|---|
| frontière image | Définition des propriétés sténographiques des frontières de toutes les images. | 3 |
| border-radius | Un pour fixer les quatre frontières - * - propriété rayon de sténographie | 3 |
| box-shadow | Fixer une ou plusieurs boîtes ombres déroulants | 3 |