Use css2.1 para obter vários efeitos de fundo e de borda
Use CSS2.1 para obter o efeito de 3 imagens de fundo e 2 imagens de conteúdo em um único elemento HTML ou o efeito de múltiplas bordas. Este método de aprimoramento progressivo se aplica a todos os navegadores que suportam pseudoelementos CSS2.1 e seus atributos de posicionamento. Nenhum suporte CSS3 é necessário.
Demonstração: vários planos de fundo usando CSS2.1
Demonstração: Polyborder usando CSS2.1
Navegadores suportados: Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+
Como isso é conseguido?
Essencialmente, os pseudo-objetos que criamos (:before e :after) são os mesmos que tratamos os elementos HTML aninhados. Mas eles têm uma vantagem única sobre os elementos HTML aninhados – eles não são semânticos.
Ao usar vários planos de fundo ou bordas múltiplas, precisamos fixar o conteúdo da camada de pseudoelemento atrás do conteúdo do elemento HTML usando posicionamento absoluto.
Conteúdo que não é real está contido em pseudoelementos de posicionamento. Isso significa que eles podem se estender livremente dentro dos limites do elemento “pai” sem afetar seu conteúdo. Isso pode combinar arbitrariamente os valores de posicionamento absoluto superior, direito, inferior, esquerdo, largura e altura. A chave principal é que seu desempenho de combinação seja flexível.
Que efeitos podem ser alcançados?
Você só precisa contar com um elemento HTML e imagens relacionadas para criar coisas como múltiplas cores de fundo, múltiplas imagens de fundo, recorte de imagem de fundo, inversão de imagem, modelos de caixa extensíveis usando bordas de imagem e colunas falsas flutuantes (nota de Xiaozhi: As três colunas efeito de altura igual (que será mencionado mais tarde), modelo de imagens fora da caixa, múltiplas bordas exibidas externamente e outros efeitos populares. Pode exigir 2 imagens de conteúdo adicionais no conteúdo gerado.
Os vários planos de fundo usando CSS2.1 e as múltiplas bordas usando as páginas de demonstração CSS2.1 mostrarão como usar a tecnologia de pseudoobjetos CSS2.1 para obter esses efeitos populares.
A maioria das estruturas contém elementos filhos. Portanto, muitas vezes, você poderá exibir mais efeitos por meio de pseudoelementos que são o primeiro elemento filho do elemento pai (definido para ser o último elemento filho). Além disso, você também pode usar :hover para produzir alguns efeitos interativos complexos no estilo.