css2.1多重背景和邊框效果實現(xiàn)原理及代碼(圖文介紹)
我要評論在單個HTML元素上利用CSS2.1實現(xiàn)擁有3張背景圖片和2張內(nèi)容圖效果，或者多重邊框的效果。這種漸進增強的方式適用于所有支持CSS2.1偽元素及其定位屬性的所有瀏覽器。不需要CSS3的支持。
支持的瀏覽器：Firefox 3.5+， Safari 4+， chrome4+， opera10+， IE8+是如何實現(xiàn)的呢？
從本質(zhì)上講，我們所創(chuàng)建的偽對象（：before和：after）跟我們在對待HTML元素嵌套關系是相同的。但他們相對于嵌套使用的HTML元素而言具有其獨特的優(yōu)勢——不具有語義化。
當使用多背景或者多重邊框的時候，我們需要將偽元素層的內(nèi)容利用絕對定位固定在HTML元素內(nèi)容的后面。
并非真實的內(nèi)容被偽元素所包含進行定位。這意味著他們能在“父”元素范圍內(nèi)隨意拉伸的同時而不會影響其內(nèi)容。這可以任意組合絕對定位的top、right、bottom、left、width和height的值，主要關鍵是他們的組合性能是靈活的。
可以達到什么效果？
僅需要依賴于一個HTML元素和相關的圖片就可以創(chuàng)建類似于多背景顏色、多背景圖、背景圖片剪輯、圖片翻轉、使用圖片邊框的可擴展的盒模型、浮動的虛假列（小志注：后面會提到的三列等高效果）、在盒模型外的圖片、顯示在外面的多邊框，以及其他流行的效果等?？赡苄枰?張額外的內(nèi)容圖片在生成的內(nèi)容中。
在使用CSS2.1的多背景和使用CSS2.1的多邊框演示頁面中將會展示如何使用CSS2.1偽對象的技術實現(xiàn)這些流行的效果。
大部分的結構都包含子元素。因此，往往很多時候，你將有可能通過父元素的第一個子元素（設置是最后一個子元素）的偽元素來展示更多的效果。此外，還可以通過：hover對樣式產(chǎn)生一些復雜的交互效果的變化。
示例代碼：多背景圖片
使用這種技術我們可以重現(xiàn)類似于Silverback網(wǎng)站中只使用一個HTML元素的多背景圖片效果。
該元素擁有自己的背景圖片和需要填充的空間。將該元素相對定位后作為其偽元素的絕對定位參考點。使用正值的z-index將有助于偽元素選擇合適的z-index值（小志注：對于這句的翻譯思考了很久一直沒能選擇合適的詞來表達，主要的意思根據(jù)下面的代碼我們可以看到是將偽元素的z-index值設置比元素自身的小即可，最好是用負值）。
#silverback {
position:relative;
z-index:1;
min-width:200px;
min-height:200px;
padding:120px 200px 50px;
background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}
兩個偽元素將會通過絕對定位的方式固定在該元素的兩邊。設置z-index值為-1將偽元素移到內(nèi)容層的后面。這樣偽元素將會位于元素的背景和邊框上面，但是該元素的內(nèi)容依然可以選擇。
#silverback:before,
#silverback:after {
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding-top:100px;
}
每個偽元素都擁有一個可重復的背景圖片屬性。這是實現(xiàn)類型多重背景效果所需要的。
偽元素的content屬性允許添加圖片內(nèi)容。這樣我們就可以添加兩張圖片在一個偽元素中?？梢酝ㄟ^改變偽元素的其他屬性改變圖片的位置，例如text-align和padding。
#silverback:before {
content:url(gorilla-1.png);
padding-left:3%;
text-align:left;
background:transparent url(vines-mid.png) 300% 0 repeat-x;
}
#silverback:after {
content:url(gorilla-2.png);
padding-right:3%;
text-align:right;
background:transparent url(vines-front.png) 70% 0 repeat-x;
}
使用CSS2.1的多重背景圖效果成品。
示例代碼：浮動的虛假列
另外一個應用是創(chuàng)建一個不需要圖片或者額外嵌套容器的等高列（小志注：這里展示的是三列等高的效果）。
這個HTML結構非常簡單。我曾經(jīng)依賴于CSS2.1選擇器使用特定類名在每一個子元素的div標簽上，但IE6不支持。假如不需要IE6的支持的話，并不需要指定類名。
<div id="faux">
<div class="main">[content]</div>
<div class="supp1">[content]</div>
<div class="supp2">[content]</div>
</div>
對這個擁有百分比的容器再次設置相對定位以及正值的z-index。應用overflow:hidden;主要是為了包含其子元素浮動后的容器（小志注：也就是清除浮動的一種方式），以及隱藏溢出的偽元素。背景顏色將作為其中一列的背景色。
#faux {
position:relative;
z-index:1;
width:80%;
margin:0 auto;
overflow:hidden;
background:#ffaf00;
}
通過定義子元素的div標簽為相對定位之后，還可以控制單獨列的位置。
#faux div {
position:relative;
float:left;
width:30%;
}
#faux .main {left:35%}
#faux .supp1 {left:-28.5%}
#faux .supp2 {left:8.5%}
另外百分百高度的兩列被建立于定位的位置和定位屬性的偽元素，同時設置了背景色。這些背景可以用（重復的）圖片代替，如果有需要的話。
#faux:before,
#faux:after {
content:"";
position:absolute;
z-index:-1;
top:0;
left:33.333%;
width:100%;
height:100%;
background:#f9b6ff;
}
#faux:after {
left:66.667%;
background:#79daff;
}
使用CSS2.1的多重背景效果成品
示例代碼：多邊框
多邊框的處理方式有很多相類似之處。利用這些方式可以避免使用圖片而產(chǎn)生簡單的效果。
元素必須具有相對定位屬性，并且在需要有填充產(chǎn)生足夠的寬度給由偽元素創(chuàng)建的額外的邊框。
#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}
將偽元素絕對定位在盒子中，并明確與元素盒模型邊距之間的距離，設置z-index值為負值后移動到內(nèi)容層的后面，同時設置你所需要的邊框色和背景色。
#borders:before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}
#borders:after {
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}
就是這么簡單。一個使用CSS2.1的多邊框效果成品就有了。
漸進增強和傳統(tǒng)瀏覽器
IE6和IE7不支持CSS2.1偽元素，將會忽略所有：before和：after聲明。它們沒有任何增強，但保留著基本的使用習慣。
關于Firefox 3.0的一個警告
Firefox 3.0雖然支持CSS2.1偽元素但不支持其定位。雖然沒有支持這部分的效果，但另一些完全不受影響，并且不知道后續(xù)的Firefox 3.0版本將會什么時候優(yōu)化成完美支持這種技術。有時，可以通過定義display:block樣式屬性可以改進偽元素的外觀樣式。
使用目前的方式，要求其定位偽元素，建議考慮Firefox 3.0支持的重要性和您的用戶目前使用的瀏覽器比例。
翻譯之外的東西，一點點個人看法
這篇文章我不知道是什么時候有的，不過原文后面是對CSS3的屬性一些內(nèi)容，我拋棄了，因為當時看到這篇文章主要是沖著使用CSS2.1的偽對象方式實現(xiàn)效果而去的。當我看到文章中提到用偽對象實現(xiàn)三列等高的時候，我表示十分驚訝，大概分析了一下這樣的等高處理方式也存在著一點點小問題，比如背景圖片定位（不支持偽對象的瀏覽器不考慮在內(nèi)了）。順帶說一下，曾經(jīng)考慮過在偽對象的content屬性中增加圖片，但一直以為是不可能實現(xiàn)的，就沒嘗試了，現(xiàn)在看到了，我也明白了，凡事只有嘗試過后才能去確認！
相關文章
CSS3打造的現(xiàn)代交互式登錄界面詳細實現(xiàn)過程
本文介紹CSS3和jQuery在登錄界面設計中的應用,涵蓋動畫、選擇器、自定義字體及盒模型技術,提升界面美觀與交互性,同時優(yōu)化性能和可訪問性，感興趣的朋友跟隨小編一起看看吧2025-06-20CSS普通流、浮動與定位網(wǎng)頁布局三大機制及最佳實踐
本文給大家講解CSS 的三種核心布局機制——普通流(Normal Flow)、浮動(Float)和定位(Positioning)對于創(chuàng)建靈活、響應式的網(wǎng)頁至關重要,本文將深入探討這三種機制的工作原2025-06-19
css實現(xiàn)角標效果并帶有文章或圖標效果(完整代碼)
文章介紹如何用CSS實現(xiàn)角標效果,通過.active類結合::after和::before偽元素,利用定位、邊框和旋轉創(chuàng)建紅色邊框與白色三角形的提示標志,適用于按鈕或卡片元素的視覺增強設計2025-06-19CSS Anchor Positioning重新定義錨點定位的時代來臨(最新推薦)
CSS Anchor Positioning是一項仍在草案中的新特性，由 Chrome 125 開始提供原生支持需啟用實驗 flag,它允許你在 CSS 中通過錨點（anchor）來相對于任意 DOM 元素定位,本文2025-06-17CSS中的Static、Relative、Absolute、Fixed、Sticky的應用與詳細對比
CSS 中的 position 屬性用于控制元素的定位方式，不同的定位方式會影響元素在頁面中的布局和層疊關系,以下是 static、relative、absolute、fixed、sticky 的詳細對比和應用2025-06-17CSS place-items: center解析與用法詳解
place-items: center; 是一個強大的 CSS 簡寫屬性，用于同時控制 網(wǎng)格(Grid) 和 彈性盒(Flexbox) 布局中的對齊方式，本文給大家介紹CSS place-items: center； 詳解與用法2025-06-17
在日常開發(fā)中，我們經(jīng)常需要讓某個元素占據(jù)容器的剩余空間，本文將介紹5種不同的方法來實現(xiàn)這個需求，并分析各種方法的優(yōu)缺點，感興趣的朋友一起看看吧2025-06-17CSS中前端單位 px、vw、vh 等的區(qū)別與使用建議
CSS單位區(qū)別與使用場景總結：px絕對、vw/vh響應式,%繼承父尺寸,em/rem文字縮放,vmin/vmax適應寬高變化,固定布局用px或%,響應式布局用vw/vh/rem,文字用em或rem，本文給大家2025-06-16- 這篇文章主要介紹了CSS 樣式表的四種應用方式及css注釋的應用小結,本文通過實例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧2025-05-21
- 在CSS布局中，padding屬性是控制元素內(nèi)容與其邊框之間距離的關鍵工具，本文介紹CSS基礎中padding，通過本文的介紹，我們深入了解了padding的基本概念、簡寫方法以及它對元2025-05-16
