CSS utilise la technologie Sprites pour obtenir des coins arrondis_Échange d'expérience

Tout d’abord, parlons brièvement de ce qu’est Sprites. Sprites est une méthode de traitement d’applications d’images Web. Il vous permet d'inclure toutes les images dispersées impliquées dans une page dans une seule grande image, de sorte que lors de l'accès à la page, les images chargées ne seront pas affichées une par une comme auparavant. Pour la vitesse du réseau populaire actuelle, le temps de chargement requis pour une seule image ne dépassant pas 200 Ko est fondamentalement le même, il n'y a donc pas lieu de s'inquiéter de ce problème.

Étape 1 : Créer notre Sprite

Utilisez des outils tels que PS pour synthétiser l'image comme indiqué dans l'image (distinguée par une ligne rouge d'un pixel)

Étape 2 : Écrire du code HTML

Tout d'abord, nous allons donner au div conteneur une classe .roundedBox :

Copier le code Le code est le suivant :

Maintenant, nous devons ajouter quatre divs supplémentaires, qui seront utilisés lors de la création de coins arrondis à l'avenir. Ensuite une classe .corner doit être chargée pour chacun, et une classe identifiée pour préciser la position de leur grille.

Copier le code Le code est le suivant :

Mon contenu dans roundBox Type 1

Étape 3 : Écrire des styles CSS

Les éléments positionnés de manière absolue sont généralement positionnés en fonction de leurs éléments parents positionnés relativement. Si l'élément parent ne peut pas être défini, il ira à l'élément parent le plus récemment positionné relativement, jusqu'à la balise body.

Définissons d'abord tous les filets

Tous les filets doivent être positionnés de manière absolue et marqués en hauteur et en largeur. La largeur et la hauteur de ma définition de congé sont toutes deux de 17 px.

Copier le code Le code est le suivant :

.corner{position:absolute;largeur:17px;hauteur:17px;}

Commencez maintenant à définir le style du conteneur div :

Copier le code Le code est le suivant :

.roundedBox {position:relative;}

Dans tout élément défini avec la classe .roundedBox, les éléments positionnés de manière absolue seront positionnés par rapport à cet élément, et non au corps de l'étiquette. Nous devons également définir certaines valeurs de remplissage. S'ils ne sont pas définis, les coins arrondis couvriront notre texte, ce qui n'est certainement pas l'effet souhaité. Important : les valeurs de remplissage supérieur et inférieur doivent être égales à la hauteur du congé. Les valeurs de remplissage gauche et droite doivent être équivalentes à la largeur du congé. Comme vous le savez déjà, la largeur et la hauteur de mon congé sont égales, donc les valeurs de remplissage des quatre coins sont également égales :

Copier le code Le code est le suivant :

.roundedBox {position: relative; remplissage: 17px; marge: 10px 0;>

Faisons une définition distincte pour l'absence de coins arrondis

Nous définirons le positionnement absolu de chaque coin arrondi et positionnerons l'image de fond (selon notre sprite) :

Copier le code Le code est le suivant :

.roundedBox {position: relative; remplissage: 17px; marge: 10px 0;>
.corner {position : absolue ; largeur : 17 px hauteur : 17px ;🎜> .topLeft {haut:0; gauche:0; position d'arrière-plan:-1px -1px;}
.topRight {haut:0; droite:0; position d'arrière-plan:-19px -1px;}
.bottomLeft {bas :0 ; gauche :0 ; position d'arrière-plan :-1px -19px;}
.bottomRight {bas:0; droite:0; position d'arrière-plan:-19px -19px;}

Enfin, associez une couleur d'arrière-plan à #type1 afin qu'elle se fonde dans les coins arrondis du sprite :

Copier le code Le code est le suivant :

#type1 {couleur de fond :#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}

Tous les codes :

Copier le code Le code est le suivant :

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">




ête>

Mon contenu dans roundBox Type 1