How to implement expandable rounded corner labels

When making web pages, it is very popular to use tags for classified display. Rounded-corner tags have the advantages of beautiful style and vivid expression. Generally, we will make the background of the rounded-corner tag into a picture. The disadvantage of this is If the number of words in the label text changes (as shown in Figure 1), the fixed background image cannot be expanded accordingly. In this way, we need to create many background images with different widths, which is very inconvenient. Here are two ways to make expandable rounded-corner labels.

Figure 1

As shown in Figure 1, the edge of the rounded label is different from the background color. First, we need to create a background image in photoshop (Figure 2). The width of the image is slightly wider than the possible text length, and the height is at least equal to the actual label. The height, edge is set to the stroke color, and the inside is transparent, but the area outside the rounded corners cannot be set to transparent and should be filled with the page background color. Here, white is used, and we name it tab_bg.gif.

Figure 2

The code is as follows:

1. The implementation idea is to set the right background of the label for the <a> tag, and set the left background of the label for the <span> tag to realize the expansion of the rounded label;

2. This method only requires downloading a background image, which solves the problem of out-of-sync background display on both sides of the label. However, if the number of words in the label exceeds the width of the background image, problems will occur (as shown in Figure 3), so in When making a background image, the image width should take into account the longest character width as much as possible.

Figure 3

 

In the above case, since the stroke effect needs to be achieved, the text can only be expanded within the width of the background, which has certain limitations. If it is a single color rounded corner label, it can be fully expanded (Figure 4).

Figure 4

Cut the left and right sides of the background image used for the first time into background images respectively (as shown in Figure 5), and name them tab_left.gif and tab_right.gif.

Figure 5

The code is as follows:

Code description:

1. Use different backgrounds for <a> and <span>, and set the link background color to the stroke color to achieve a monochrome label effect;

2. This method can achieve arbitrary expansion effects.