Tutoriel d'exemple de bordure CSS3

Bordures CSS3

Avec CSS3, vous pouvez créer des bordures arrondies, ajouter des zones d'ombre et des images comme bordures sans utiliser de programmes de conception comme Photoshop .

Dans ce chapitre, vous découvrirez les propriétés de bordure suivantes :

border-radius

box-shadow

border-image

Prise en charge du navigateur

propriété

Prise en charge du navigateur

Internet Explorer 9+ prend en charge le rayon de bordure et l'ombre de la boîte.

Firefox, Chr ome et Safari prennent en charge tous les derniers attributs de bordure.

Remarque : Safari avec le préfixe -webkit- prend en charge les bordures ombrées.

Opera avec le préfixe -o- prend en charge les images de bordure.

Coins arrondis CSS3

L'ajout de coins arrondis en CSS2 est délicat. Nous avons dû utiliser des images différentes dans 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 :

C'est une bordure arrondie !

Exemple

Ajouter des éléments arrondis dans div :

div
{
border:2px solid;
border-radius:25px;
}

Ombre de boîte CSS3

La propriété box-shadow en CSS3 est utilisée pour ajouter Shadow :

Instance

Ajouter l'attribut box-shadow dans div

div
{
box-shadow: 10px 10px 5px #888888;
}

Bordure CSS3Image

Avec CSS3 Avec la bordure- image, vous pouvez créer une bordure à l'aide d'une image :

L'attribut border-image vous permet de spécifier une image comme bordure ! Image originale utilisée pour créer la bordure ci-dessus :

Créer une bordure à l'aide d'une image dans un div :

Exemple

Créer une bordure à l'aide d'une image dans un div

div
{
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 */
}

【Recommandations associées】

1. Recommandation spéciale : Téléchargez la version V0.1 de "php Programmer Toolbox"

2. Tutoriel vidéo CSS en ligne gratuit

3 php.cn Dugu Jiujian (2) - Tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!