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 :

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.

É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.

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

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 :

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) :