在單個HTML元素上利用CSS2.1實(shí)現(xiàn)擁有3張背景圖片和2張內(nèi)容圖效果，或者多重邊框的效果。這種漸進(jìn)增強(qiáng)的方式適用于所有支持CSS2.1偽元素及其定位屬性的所有瀏覽器。不需要CSS3的支持。
支持的瀏覽器：Firefox 3.5+， Safari 4+， chrome4+， opera10+， IE8+是如何實(shí)現(xiàn)的呢？
從本質(zhì)上講，我們所創(chuàng)建的偽對象（：before和：after）跟我們在對待HTML元素嵌套關(guān)系是相同的。但他們相對于嵌套使用的HTML元素而言具有其獨(dú)特的優(yōu)勢——不具有語義化。
當(dāng)使用多背景或者多重邊框的時候，我們需要將偽元素層的內(nèi)容利用絕對定位固定在HTML元素內(nèi)容的后面。
并非真實(shí)的內(nèi)容被偽元素所包含進(jìn)行定位。這意味著他們能在“父”元素范圍內(nèi)隨意拉伸的同時而不會影響其內(nèi)容。這可以任意組合絕對定位的top、right、bottom、left、width和height的值，主要關(guān)鍵是他們的組合性能是靈活的。
可以達(dá)到什么效果？
僅需要依賴于一個HTML元素和相關(guān)的圖片就可以創(chuàng)建類似于多背景顏色、多背景圖、背景圖片剪輯、圖片翻轉(zhuǎn)、使用圖片邊框的可擴(kuò)展的盒模型、浮動的虛假列（小志注：后面會提到的三列等高效果）、在盒模型外的圖片、顯示在外面的多邊框，以及其他流行的效果等。可能需要2張額外的內(nèi)容圖片在生成的內(nèi)容中。
在使用CSS2.1的多背景和使用CSS2.1的多邊框演示頁面中將會展示如何使用CSS2.1偽對象的技術(shù)實(shí)現(xiàn)這些流行的效果。
大部分的結(jié)構(gòu)都包含子元素。因此，往往很多時候，你將有可能通過父元素的第一個子元素（設(shè)置是最后一個子元素）的偽元素來展示更多的效果。此外，還可以通過：hover對樣式產(chǎn)生一些復(fù)雜的交互效果的變化。
示例代碼：多背景圖片
使用這種技術(shù)我們可以重現(xiàn)類似于Silverback網(wǎng)站中只使用一個HTML元素的多背景圖片效果。
該元素?fù)碛凶约旱谋尘皥D片和需要填充的空間。將該元素相對定位后作為其偽元素的絕對定位參考點(diǎn)。使用正值的z-index將有助于偽元素選擇合適的z-index值（小志注：對于這句的翻譯思考了很久一直沒能選擇合適的詞來表達(dá)，主要的意思根據(jù)下面的代碼我們可以看到是將偽元素的z-index值設(shè)置比元素自身的小即可，最好是用負(fù)值）。
