Utilisez CSS2.1 pour obtenir plusieurs effets d'arrière-plan et de bordure
Utilisez CSS2.1 pour obtenir l'effet de 3 images d'arrière-plan et de 2 images de contenu sur un seul élément HTML, ou l'effet de plusieurs bordures. Cette méthode d'amélioration progressive s'applique à tous les navigateurs prenant en charge les pseudo-éléments CSS2.1 et leurs attributs de positionnement. Aucune prise en charge CSS3 n'est requise.
Démo : arrière-plans multiples utilisant CSS2.1
Démo : Polyborder utilisant CSS2.1
Navigateurs pris en charge : Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+
Comment y parvient-on ?
Essentiellement, les pseudo-objets que nous créons (:before et :after) sont les mêmes que la façon dont nous traitons les éléments HTML imbriqués. Mais ils ont un avantage unique sur les éléments HTML imbriqués : ils ne sont pas sémantiques.
Lors de l'utilisation de plusieurs arrière-plans ou de plusieurs bordures, nous devons corriger le contenu de la couche de pseudo-éléments derrière le contenu de l'élément HTML en utilisant un positionnement absolu.
Le contenu qui n'est pas réel est contenu dans des pseudo-éléments à des fins de positionnement. Cela signifie qu'ils peuvent s'étendre librement dans les limites de l'élément « parent » sans affecter son contenu. Cela peut arbitrairement combiner les valeurs du haut, de la droite, du bas, de la gauche, de la largeur et de la hauteur du positionnement absolu. La clé principale est que leurs performances de combinaison sont flexibles.
Quels effets peuvent être obtenus ?
Vous n'avez besoin que d'un seul élément HTML et des images associées pour créer des éléments tels que plusieurs couleurs d'arrière-plan, plusieurs images d'arrière-plan, un découpage d'image d'arrière-plan, un retournement d'image, des modèles de boîtes extensibles utilisant des bordures d'image et de fausses colonnes flottantes (note de Xiaozhi : les trois colonnes effet d'égale hauteur (qui sera mentionné plus tard), images hors du modèle de boîte, multi-bordures affichées à l'extérieur et autres effets populaires. Peut nécessiter 2 images de contenu supplémentaires dans le contenu généré.
Les multiples arrière-plans utilisant CSS2.1 et les multiples bordures utilisant les pages de démonstration CSS2.1 montreront comment utiliser la technologie pseudo-objet CSS2.1 pour obtenir ces effets populaires.
La plupart des structures contiennent des éléments enfants. Par conséquent, vous pourrez souvent afficher plus d'effets via des pseudo-éléments qui sont le premier élément enfant de l'élément parent (défini comme étant le dernier élément enfant). De plus, vous pouvez également utiliser :hover pour produire des effets interactifs complexes sur le style.