Como implementar etiquetas expansíveis com cantos arredondados

Ao criar páginas da web, é muito comum usar tags para exibição classificada. Tags de canto arredondado têm as vantagens de um estilo bonito e expressão vívida. Geralmente, transformaremos o fundo da tag de canto arredondado em uma imagem. isto é, se o número de palavras no texto do rótulo mudar (conforme mostrado na Figura 1), a imagem de fundo fixa não poderá ser expandida de acordo. Desta forma, precisamos criar muitas imagens de fundo com larguras diferentes, o que é muito inconveniente. Aqui estão duas maneiras de fazer etiquetas expansíveis com cantos arredondados.

Figura 1

Conforme mostrado na Figura 1, a borda do rótulo arredondado é diferente da cor de fundo. Primeiro, precisamos criar uma imagem de fundo no Photoshop (Figura 2). a altura é pelo menos igual à etiqueta real. A altura, a borda é definida com a cor do traço e o interior é transparente, mas a área fora dos cantos arredondados não pode ser definida como transparente e deve ser preenchida com a cor de fundo da página. Aqui, o branco é usado e o chamamos de tab_bg.gif.

Figura 2

O código é o seguinte:

1. A ideia de implementação é definir o fundo direito do rótulo para a tag <a> e definir o fundo esquerdo do rótulo para a tag <span> para realizar a expansão do rótulo arredondado;

2. Este método requer apenas o download de uma imagem de fundo, o que resolve o problema de exibição de fundo fora de sincronia em ambos os lados da etiqueta. No entanto, se o número de palavras na etiqueta exceder a largura da imagem de fundo, haverá problemas. ocorrer (como mostrado na Figura 3), portanto, ao criar uma imagem de fundo, a largura da imagem deve levar em consideração a maior largura de caracteres possível.

Figura 3

 

No caso acima, como é necessário obter o efeito do traço, o texto só pode ser expandido dentro da largura do fundo, o que tem certas limitações. Se for uma etiqueta de canto arredondado de cor única, ela poderá ser totalmente expandida (Figura 4).

Figura 4

Corte os lados esquerdo e direito da imagem de fundo usada pela primeira vez em imagens de fundo respectivamente (como mostrado na Figura 5) e nomeie-os como tab_left.gif e tab_right.gif.

Figura 5

O código é o seguinte:

Descrição do código:

1. Use fundos diferentes para <a> e <span> e defina a cor de fundo do link para a cor do traço para obter um efeito de rótulo monocromático;

2. Este método pode obter efeitos de expansão arbitrários.