css2.1多重背景和边框效果实现原理及代码(图文介绍)

在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果,或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪元素及其定位属性的所有浏览器。不需要CSS3的支持。 支持的浏览器:Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+ 是如何实现的呢? 从本质上讲,我们所创建的伪对象(:before和:after)跟我们在对待HTML元素嵌套关系是相同的。但他们相对于嵌套使用的HTML元素而言具有其独特的优势——不具有语义化。 当使用多背景或者多重边框的时候,我们需要将伪元素层的内容利用绝对定位固定在HTML元素内容的后面