Use css2.1 to achieve multiple background and multiple border effects
Use CSS2.1 to achieve the effect of 3 background images and 2 content images on a single HTML element, or the effect of multiple borders. This progressive enhancement method applies to all browsers that support CSS2.1 pseudo-elements and their positioning attributes. No CSS3 support is required.
Demo: Multiple backgrounds using CSS2.1
Supported browsers: Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+
How is this achieved?
Essentially, the pseudo-objects we create (:before and :after) are the same as how we treat nested HTML elements. But they have a unique advantage over nested HTML elements - they are not semantic.
When using multiple backgrounds or multiple borders, we need to fix the content of the pseudo-element layer behind the content of the HTML element using absolute positioning.
Content that is not real is contained in pseudo elements for positioning. This means they can stretch freely within the confines of the "parent" element without affecting its content. This can arbitrarily combine the values of top, right, bottom, left, width and height of absolute positioning. The main key is that their combination performance is flexible.
What effects can be achieved?
You only need to rely on one HTML element and related images to create things like multiple background colors, multiple background images, background image clipping, image flipping, extensible box models using image borders, and floating fake columns (Xiaozhi's note: The three-column equal-height effect (which will be mentioned later), pictures outside the box model, multi-borders displayed outside, and other popular effects. May require 2 additional content images in the generated content.
The multiple backgrounds using CSS2.1 and the multiple borders using CSS2.1 demo pages will show how to use CSS2.1 pseudo-object technology to achieve these popular effects.
Most structures contain child elements. Therefore, often times, you will be able to display more effects through pseudo-elements that are the first child element of the parent element (set to be the last child element). In addition, you can also use :hover to produce some complex interactive effects on the style.