Comment implémenter des étiquettes extensibles aux coins arrondis

Lors de la création de pages Web, il est très courant d'utiliser des balises pour l'affichage classifié. Les balises aux coins arrondis présentent les avantages d'un beau style et d'une expression vive. Généralement, nous transformerons l'arrière-plan de la balise aux coins arrondis en une image. c'est-à-dire que si le nombre de mots dans le texte de l'étiquette change (comme le montre la figure 1), l'image d'arrière-plan fixe ne peut pas être agrandie en conséquence. De cette façon, nous devons créer de nombreuses images d’arrière-plan de différentes largeurs, ce qui est très gênant. Voici deux façons de créer des étiquettes extensibles aux coins arrondis.

Figure 1

Comme le montre la figure 1, le bord de l'étiquette arrondie est différent de la couleur d'arrière-plan. Tout d'abord, nous devons créer une image d'arrière-plan dans Photoshop (Figure 2). La largeur de l'image est légèrement plus large que la longueur possible du texte. la hauteur est au moins égale à l'étiquette réelle. La hauteur, le bord est défini sur la couleur du trait et l'intérieur est transparent, mais la zone à l'extérieur des coins arrondis ne peut pas être définie sur transparente et doit être remplie avec la couleur d'arrière-plan de la page. Ici, le blanc est utilisé et nous le nommons tab_bg.gif.

Figure 2

Le code est le suivant :

1. L'idée d'implémentation est de définir l'arrière-plan droit de l'étiquette pour la balise <a> et de définir l'arrière-plan gauche de l'étiquette pour la balise <span> afin de réaliser l'expansion de l'étiquette arrondie ;

2. Cette méthode nécessite uniquement le téléchargement d'une image d'arrière-plan, ce qui résout le problème d'affichage d'arrière-plan désynchronisé des deux côtés de l'étiquette. Cependant, si le nombre de mots dans l'étiquette dépasse la largeur de l'image d'arrière-plan, des problèmes surviendront. se produire (comme le montre la figure 3), donc lors de la création d'une image d'arrière-plan, la largeur de l'image doit prendre en compte autant que possible la largeur des caractères la plus longue.

Figure 3

 

Dans le cas ci-dessus, étant donné que l'effet de contour doit être obtenu, le texte ne peut être agrandi que dans la largeur de l'arrière-plan, ce qui présente certaines limites. S'il s'agit d'une étiquette aux coins arrondis d'une seule couleur, elle peut être entièrement développée (Figure 4).

Figure 4

Découpez respectivement les côtés gauche et droit de l'image d'arrière-plan utilisée pour la première fois en images d'arrière-plan (comme le montre la figure 5) et nommez-les tab_left.gif et tab_right.gif.

Figure 5

Le code est le suivant :

Description des codes :

1. Utilisez des arrière-plans différents pour <a> et <span> et définissez la couleur d'arrière-plan du lien sur la couleur du trait pour obtenir un effet d'étiquette monochrome ;

2. Cette méthode peut produire des effets d'expansion arbitraires.