Multiple background effects and border effects using CSS2.1

Web page Production WEBJX article introduction: use CSS2.1 's multiple background effects and border effects.

Use the CSS2.1 implementation on a single HTML element to have 3 background pictures and 2-piece content graph effects, or multiple border effects. This incremental approach applies to all browsers that support CSS2.1 pseudo elements and their positioning properties. There is no need for CSS3 support.

Demo: Using multiple backgrounds for CSS2.1

Demo: Using CSS2.1 's multilateral box

Supported browsers: Firefox 3.5+, Safari 4+, chrome4+, opera10+, ie8+

How did it happen?

Essentially, the artifacts we create (: Before and: After) are the same as the nested relationships we are dealing with HTML elements. But they have a unique advantage over nested HTML elements-not semantically.

When using multiple backgrounds or multiple borders, we need to secure the content of the pseudo element layer with absolute positioning behind the content of the HTML element.

Not true content is positioned by pseudo elements. This means that they can stretch freely within the range of "parent" elements without affecting their content. This can be any combination of absolute positioning of the top, right, bottom, left, width and height values, the key is that their combined performance is flexible.

What effect can be achieved?

Just rely on an HTML element and related pictures to create a background-like color, multiple backgrounds, background picture clips, picture flips, expandable box models using picture borders, floating fake columns (small notes: three-column high effects that are mentioned later), pictures outside the box model, and multiple borders displayed outside, and other popular effects. You may need 2 additional content pictures in the generated content.

The use of CSS2.1 background and the CSS2.1 of the Multilateral Box demo page will show how to use the CSS2.1 pseudo object technology to achieve these popular effects.

Most of the structures contain child elements. Therefore, often, you will have the possibility to show more effects through the pseudo elements of the first child element of the parent element (the last child element is set). In addition, you can also use: hover to create some complex interaction effects on styles.

[1] [2] [3] [4] Next page