Al crear páginas web, es muy popular utilizar etiquetas para visualización clasificada. Las etiquetas de esquinas redondeadas tienen las ventajas de un estilo hermoso y una expresión vívida. Generalmente, convertiremos el fondo de la etiqueta de esquinas redondeadas en una imagen. esto es Si la cantidad de palabras en el texto de la etiqueta cambia (como se muestra en la Figura 1), la imagen de fondo fija no se puede expandir en consecuencia. De esta manera, necesitamos crear muchas imágenes de fondo con diferentes anchos, lo cual es muy inconveniente. Aquí hay dos formas de hacer etiquetas expandibles con esquinas redondeadas.
Figura 1
Etiquetas redondeadas de trazo
Como se muestra en la Figura 1, el borde de la etiqueta redondeada es diferente del color de fondo. Primero, necesitamos crear una imagen de fondo en Photoshop (Figura 2). El ancho de la imagen es ligeramente más ancho que la longitud posible del texto. la altura es al menos igual a la etiqueta real, el borde se establece en el color del trazo y el interior es transparente, pero el área fuera de las esquinas redondeadas no se puede establecer en transparente y debe rellenarse con el color de fondo de la página. Aquí se utiliza el blanco y lo llamamos tab_bg.gif.
Figura 2
El código es el siguiente:
| Aquí hay una cita: <tipo de estilo="texto/css"> a.tab{ float:left; margin:10px; padding-right:10px; fondo:#4B90C6 url(tab_bg.gif) derecha superior sin repetición; fuente:bold 14px/30px 'Verdana'; a.tab span{ padding-left:10px; fondo:url(tab_bg.gif) sin repetición; </estilo> <cuerpo bgcolor="#FFFFFF"> <a href="#" class="tab"><span>Inicio</span></a> <a href="#" class="tab"><span>Perfil</span></a> <a href="#" class="tab"><span>Libro de visitas</span></a> </cuerpo> |
Descripción del código:
1. La idea de implementación es establecer el fondo derecho de la etiqueta para la etiqueta <a> y establecer el fondo izquierdo de la etiqueta para la etiqueta <span> para lograr la expansión de la etiqueta de esquina redondeada;
2. Este método solo requiere descargar una imagen de fondo, lo que resuelve el problema de la visualización del fondo no sincronizada en ambos lados de la etiqueta. Sin embargo, si la cantidad de palabras en la etiqueta excede el ancho de la imagen de fondo, surgirán problemas. Esto ocurre (como se muestra en la Figura 3), por lo que al crear una imagen de fondo, el ancho de la imagen debe tener en cuenta el ancho de carácter más largo tanto como sea posible.
Figura 3
Etiqueta de esquinas redondeadas de color sólido
En el caso anterior, dado que es necesario lograr el efecto de trazo, el texto solo se puede expandir dentro del ancho del fondo, lo cual tiene ciertas limitaciones. Si se trata de una etiqueta de esquina redondeada de un solo color, se puede expandir por completo (Figura 4).
Figura 4
Corte los lados izquierdo y derecho de la imagen de fondo utilizada por primera vez en imágenes de fondo respectivamente (como se muestra en la Figura 5) y asígneles el nombre tab_left.gif y tab_right.gif.
Figura 5
El código es el siguiente:
| Aquí hay una cita: <tipo de estilo="texto/css"> a.tab{ float:left; margin:10px; padding-right:10px; fondo:#033EA5 url(tab_right.gif) parte superior derecha sin repetición; a.tab span{ padding-left:10px; fondo:url(tab_left.gif) no-repeat; </estilo> <cuerpo bgcolor="#FFFFFF"> <a href="#" class="tab"><span>Inicio</span></a> <a href="#" class="tab"><span>Perfil</span></a> <a href="#" class="tab"><span>Libro de visitas</span></a> </cuerpo> |
Descripción del código:
1. Utilice fondos diferentes para <a> y <span> y establezca el color de fondo del enlace en el color del trazo para lograr un efecto de etiqueta monocromática;
2. Este método puede lograr efectos de expansión arbitrarios.