|
使用CSS2.1的多重背景效果成品。
示例代碼：多邊框
多邊框的處理方式有很多相類似之處。利用這些方式可以避免使用圖片而產生簡單的效果。
元素必須具有相對定位屬性，并且在需要有填充產生足夠的寬度給由偽元素創(chuàng)建的額外的邊框。
Copy to clipboard]View Code CSS1
#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}
將偽元素絕對定位在盒子中，并明確與元素盒模型邊距之間的距離，設置z-index值為負值后移動到內容層的后面，同時設置你所需要的邊框色和背景色。
Copy to clipboard]View Code CSS1
#borders:before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}
Copy to clipboard]View Code CSS1
#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的屬性一些內容，我拋棄了，因為當時看到這篇文章主要是沖著使用CSS2.1的偽對象方式實現(xiàn)效果而去的。當我看到文章中提到用偽對象實現(xiàn)三列等高的時候，我表示十分驚訝，大概分析了一下這樣的等高處理方式也存在著一點點小問題，比如背景圖片定位（不支持偽對象的瀏覽器不考慮在內了）。順帶說一下，曾經考慮過在偽對象的content屬性中增加圖片，但一直以為是不可能實現(xiàn)的，就沒嘗試了，現(xiàn)在看到了，我也明白了，凡事只有嘗試過后才能去確認！
原文：http://blog.linxz.cn/multiple_backgrounds_and_borders_with_css2/
本文鏈接：http://m.95time.cn/tech/web/2010/7725.asp 
出處：小志博客
責任編輯：bluehearts
上一頁 css2.1實現(xiàn)多重背景和邊框效果 [3] 下一頁
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 css2.1實現(xiàn)多重背景和邊框效果 [4]
