1. 語義化結(jié)構(gòu)
先看一段頁面代碼：
<div class="rightcl_part toggle_box" id="help_guide_3">
<div class="stretch ac_toggler">我的勛章<span title="點擊收起"></span></div>
<div class="medal clearfix toggle_body">勛章內(nèi)容</div>
<div class="paddingleft toggle_body">查看更多</div>
</div>
繁多的“class”、“id”等標(biāo)簽令頁面越來越臃腫，網(wǎng)站制作者想爆頭腦取名，瀏覽者不易閱讀，無從下手。借助Html5更語義化的結(jié)構(gòu)標(biāo)簽，我們可以如下優(yōu)化：
<section>
<header>我的勛章<span title="點擊收起"></span></header>
<article>勛章內(nèi)容</article>
<footer >查看更多</footer>
</section>
當(dāng)然在Html5時代想完全和“class”、“id”說拜拜是不可能的，當(dāng)頁面需要同時出現(xiàn)多個“section”、“header”等時，一種方法是分別定義不同的“class”或“id”，另一方法就是借助更強(qiáng)大的css選擇器了，這里列舉幾個“選擇器”樣例：
body nav+section {} 定位最外層的section 元素
section>section {} 定位下一個section 元素
section section article {} 定位article 元素
2. 自由透明度
在Css3時代網(wǎng)站建設(shè)者們終于可以拋棄長長的透明濾鏡，在同一個樣式里分別為“背景”、“文字”、“邊框”定義不同的透明度了，css樣式如下：
.box {
color: rgba(255,255,255,0.9); /*文字透明度*/
background-color: rgba(0,0,0,0.2); /*背景透明度*/
border:3px solid rgba(0,0,0,0.5); /*邊框透明度*/
height:100px;
width:100px;
}
但發(fā)現(xiàn)奇怪的一點邊框的透明度會與背景的透明度相疊加，具體更好的分離透明度方法還在嘗試中。
3. 盡情圓角吧
昔日當(dāng)碰到應(yīng)對不同寬度的圓角結(jié)構(gòu)，不得不分兩段或三段來處理，現(xiàn)在也可以通過一句樣式來完成了！圓角樣式：border-radius:10px; 可以直接加入上面的樣式測試效果：
.box {
color: rgba(255,255,255,0.9); /*文字透明度*/
background-color: rgba(0,0,0,0.2); /*背景透明度*/
border:3px solid rgba(0,0,0,0.5); /*邊框透明度*/
border-radius:10px; /*圓角率*/
height:100px;
width:100px;
}
也可分別定義四個角的圓角率，樣式如下：
border-top-right-radius:10px; border-bottom-right-radius:10px;
border-bottom-left-radius:10px; border-top-left-radius:10px;
其實Mozilla(Firefox)、Webkit(Safari和Chrome)內(nèi)核也早已有自己的圓角樣式，具體如下表：
CSS3 | Mozilla | WebKit |
border-top-right-radius | -moz-border-radius-topright | -webkit-border-top-right-radius |
border-bottom-right-radius | -moz-border-radius-bottomright | -webkit-border-bottom-right-radius |
border-bottom-left-radius | -moz-border-radius-bottomleft | -webkit-border-bottom-left-radius |
border-top-left-radius | -moz-border-radius-topleft | -webkit-border-top-left-radius |
border-radius | -moz-border-radius | -webkit-border-radius |
4.“文字”、“盒子”陰影
擯棄長長濾鏡樣式的快感，也只有Css3時代才能感受得到，期待早日到來。
文字陰影：text-shadow: 2px 2px 1px rgba(0,0,0,0.5);
盒子陰影：box-shadow: 0 0 10px rgb(0,0,0);
可繼續(xù)加入上面的樣式測試效果：
.box {
color: rgba(255,255,255,0.9); /*文字透明度*/
background-color: rgba(0,0,0,0.2); /*背景透明度*/
border:3px solid rgba(0,0,0,0.5); /*邊框透明度*/
border-radius:10px; /*圓角率*/
text-shadow: 2px 2px 1px rgba(0,0,0,0.5); /*文字陰影*/
box-shadow: 0 0 10px rgb(0,0,0); /*盒子陰影*/
height:100px;
width:100px;
甚至看到網(wǎng)上有更瘋狂的做法，幾個陰影同時添加：
text-shadow: 0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 15px -4px 3px rgba(255,0,0,.75);
其中盒子陰影濾鏡對瀏覽器版本要求比較高，若使用較低版本的FireFox和Chrome可使用原生樣式測試效果：
-moz-box-shadow: 0 0 10px rgb(0,0,0);
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
5. 同一盒子多背景圖
Web開發(fā)時，添加多個背景圖只需在原來的基礎(chǔ)上，中間以逗號隔開即可，樣式如下：
background-image: url(testBg1.gif) , url(testBg2.gif);
background-repeat: no-repeat;
background-position: bottom left , top right;
