1. 語義化結(jié)構(gòu)

先看一段頁面代碼：

<div class="rightcl_part toggle_box" id="help_guide_3">

    <div class="stretch ac_toggler">我的勛章<span title="點(diǎn)擊收起"></span></div>

    <div class="medal clearfix toggle_body">勛章內(nèi)容</div>

    <div class="paddingleft toggle_body">查看更多</div>

</div>

繁多的“class”、“id”等標(biāo)簽令頁面越來越臃腫，開發(fā)者想爆頭腦取名，瀏覽者不易閱讀，無從下手。借助Html5更語義化的結(jié)構(gòu)標(biāo)簽，我們可以如下優(yōu)化：

<section>

    <header>我的勛章<span title="點(diǎn)擊收起"></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時代我們終于可以拋棄長長的透明濾鏡，在同一個樣式里分別為“背景”、“文字”、“邊框”定義不同的透明度了，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)奇怪的一點(diǎ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;

其實(shí)Mozilla(Firefox)、Webkit(Safari和Chrome)內(nèi)核也早已有自己的圓角樣式，具體如下表：

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. 同一盒子多背景圖

添加多個背景圖只需在原來的基礎(chǔ)上，中間以逗號隔開即可，樣式如下：

background-image: url(testBg1.gif) , url(testBg2.gif);

background-repeat: no-repeat;

background-position: bottom left , top right;