Utilice css2.1 para lograr múltiples efectos de fondo y bordes
Utilice CSS2.1 para lograr el efecto de 3 imágenes de fondo y 2 imágenes de contenido en un solo elemento HTML, o el efecto de múltiples bordes. Este método de mejora progresiva se aplica a todos los navegadores que admiten pseudoelementos CSS2.1 y sus atributos de posicionamiento. No se requiere soporte CSS3.
Demostración: múltiples fondos usando CSS2.1
Demostración: Polyborder usando CSS2.1
Navegadores compatibles: Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+
¿Cómo se logra esto?
Esencialmente, los pseudoobjetos que creamos (:antes y :después) son los mismos que tratamos los elementos HTML anidados. Pero tienen una ventaja única sobre los elementos HTML anidados: no son semánticos.
Cuando usamos múltiples fondos o múltiples bordes, necesitamos arreglar el contenido de la capa de pseudoelemento detrás del contenido del elemento HTML usando el posicionamiento absoluto.
Los contenidos que no son reales están contenidos en pseudoelementos para su posicionamiento. Esto significa que pueden expandirse libremente dentro de los límites del elemento "principal" sin afectar su contenido. Esto puede combinar arbitrariamente los valores de posicionamiento absoluto superior, derecho, inferior, izquierdo, ancho y alto. La clave principal es que su rendimiento combinado es flexible.
¿Qué efectos se pueden conseguir?
Solo necesita confiar en un elemento HTML e imágenes relacionadas para crear cosas como múltiples colores de fondo, múltiples imágenes de fondo, recorte de imágenes de fondo, volteo de imágenes, modelos de cajas extensibles usando bordes de imágenes y columnas falsas flotantes (nota de Xiaozhi: Las tres columnas efecto de igual altura (que se mencionará más adelante), imágenes fuera del modelo de caja, bordes múltiples mostrados en el exterior y otros efectos populares. Puede requerir 2 imágenes de contenido adicionales en el contenido generado.
Los múltiples fondos que usan CSS2.1 y los múltiples bordes que usan las páginas de demostración de CSS2.1 mostrarán cómo usar la tecnología de pseudoobjetos CSS2.1 para lograr estos efectos populares.
La mayoría de las estructuras contienen elementos secundarios. Por lo tanto, muchas veces podrá mostrar más efectos a través de pseudoelementos que son el primer elemento secundario del elemento principal (configurado para ser el último elemento secundario). Además, también puedes utilizar :hover para producir algunos efectos interactivos complejos en el estilo.