CSS utilise la technologie Sprites pour obtenir des coins arrondis

Cet article présente principalement l'effet de l'utilisation de la technologie CSS Sprites pour obtenir des coins arrondis. Il a maintenant une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

En utilisant la technologie CSS Sprites pour. dessiner des cercles Corner, pour faire simple, consiste à créer un cercle sur une image, à définir 4 p et à prendre un coin de l'image comme arrière-plan pour chaque p. Regardons la méthode de mise en œuvre spécifique.

Tout d'abord, parlons brièvement de ce que sont les Sprites. Les Sprites sont une méthode de traitement 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 conteneur p une classe .roundedBox :

<p class="roundedBox"></p>

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

<p class="roundedBox">
    <strong>My content in roundedBox Type 1</strong>
    <p class="corner topLeft"></p>
    <p class="corner topRight"></p>
    <p class="corner bottomLeft"></p>
    <p class="corner bottomRight"></p>
</p>

É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 de manière relative. 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 coins arrondis

Tous les coins arrondis doivent être définis avec un positionnement absolu, et la hauteur et la largeur doivent être précisées. La largeur et la hauteur de mes coins arrondis sont toutes deux de 17 px.

.corner{position:absolute;width:17px;height:17px;}

Définissons maintenant le style du conteneur p :

.roundedBox {position:relative;}

Toute définition a Dans un élément de classe .roundedBox, les éléments en position 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 mes congés sont égales, donc les valeurs de remplissage des quatre coins sont également égales :

.roundedBox {position:relative; padding:17px; margin:10px 0;}

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

Nous allons effectuer des réglages de positionnement absolus pour chaque coin arrondi et positionner l'image d'arrière-plan (selon notre sprite) :

.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;} 
.topRight {top:0; right:0; background-position:-19px -1px;} 
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

Enfin, associez une couleur d'arrière-plan à #type1 pour en faire des coins arrondis intégré au sprite :

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

Code complet :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}
#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}
</style>
</head>
<body>
<p class="roundedBox" id="type1">
    <strong>My content in roundedBox Type 1</strong>
    <p class="corner topLeft"></p>
    <p class="corner topRight"></p>
    <p class="corner bottomLeft"></p>
    <p class="corner bottomRight"></p>
</p>
</body>
</html>

Ce qui précède est tout le contenu de cet article, j'espère Cela sera utile pour l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Déformation tridimensionnelle CS3 pour réaliser des blocs tridimensionnels

Environ 20 effets d'animation de chargement produits par CSS3

Comment CSS3 implémente l'effet d'animation d'inclinaison et de rotation en même temps

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!