CSS3 Bordures (Border)

en utilisant CSS3des images peuvent être appliquées aux bords des éléments.

en utilisant CSS3bordure

CSS3deux nouvelles propriétés sont fournies pour styliser de manière plus élégante les bords des éléments- bordure-image pour ajouter des images à la bordure-l'attribut radius, ainsi que les propriétés utilisées pour créer des coins arrondis sans utiliser d'images.

La section suivante vous présentera CSS3ces nouvelles propriétés de bordure, pour d'autres propriétés liées aux bords, voirBordures CSS.

Créer un tutoriel CSS3coins arrondis

ce bord-L'attribut radius peut être utilisé pour créer des coins arrondis. Cet attribut définit généralement la forme des angles de la bordure externe. Dans CSS3Avant cela, les images de découpe étaient utilisées pour créer des coins arrondis assez complexes.

.box　{
　　　　largeur:　300px;
　　　　hauteur:　150px;
　　　　background:　#ffb6c1;
　　　　bordure:　2px　solide　#f08080;
　　　　bordure-radius:　20px;
}

Ajouter CSS3Images de bordure

bordure-l'attribut image permet de spécifier une image à utiliser comme bord de l'élément.
La conception des bords est basée sur-Les côtés et les coins de l'image spécifiée dans l'URL de source de l'image créent des bords. Les images de bordure peuvent être découpées, répétées, redimensionnées et étirées de diverses manières pour s'adapter à la taille de la zone de l'image de bordure.

.box　{
　　　　largeur:　300px;
　　　　hauteur:　150px;
　　　　bordure:　15px　solide　transparente;
　　　　-webkit-bordure-image:　url("border.png")　30　30　roulante;　/*　Safari　3.1-5　*/
　　　　-o-bordure-image:　url("border.png")　30　30　roulante;　/*　Opera　11-12.1　*/
　　　　bordure-image:　url("border.png")　30　30　roulante;
}