Maison > interface Web > tutoriel CSS > le corps du texte

CSS utilise la technologie Sprites pour obtenir des coins arrondis

不言
Libérer: 2018-06-28 11:17:39
original
2028 Les gens l'ont consulté

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 )

CSS utilise la technologie Sprites pour obtenir des coins arrondis

Étape 2 : Écrire du code HTML

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

<p class="roundedBox"></p>
Copier après la connexion

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>
Copier après la connexion

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

CSS utilise la technologie Sprites pour obtenir des coins arrondis

.corner{position:absolute;width:17px;height:17px;}
Copier après la connexion

Définissons maintenant le style du conteneur p :

.roundedBox {position:relative;}
Copier après la connexion

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;}
Copier après la connexion

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;}
Copier après la connexion

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);}
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal