CSS3的應用，你學會了嗎？

開場白 

　　CSS3相對於CSS2引入了不少的新的css屬性和特效，利用css3實現了原來須要加入js才能模擬的效果，所以前端性能提升了不少。

各大瀏覽器廠商包括IE都逐漸的加大對CSS3 HTML5的支持，移動web前端的火熱形式也對HTML5 CSS3起到了極大的推進做用。

1、快捷的CSS3樣式選擇方式

//tbody下的奇數tr

Body > .mainTable table tbody:nth(odd){

background-color:white;

}

//tr下的偶數td

Body > .mainTable table tr:nth(even){

background-color:gray;

}

//全部class不是normalSize的節點

:not(.normalSize){

font-size:16px;

}

//全部div下的第一個子節點

Div:first-child(){

Border-color:red;

}

以上的新加的屬性極大的方便了咱們設計動態樣式。試想若是須要一個漂亮的表格，表格奇偶行顯示的顏色不一致，你是否是仍是這麼辦呢？

在全部的奇數行都加上樣式odd，偶數行加上樣式even。定義.odd{}.even{}的樣式。或者後端給動態的表格的數據行，動態的添加相應的樣式。

其實你就該想一想使用CSS3特性了，如利用CSS3的nth能夠直接定位到第幾個元素、奇數或偶數元素。

2、不用圖片實現漂亮的按鈕

border-radius:邊框圓角效果

box-shadow:盒子陰影效果 作個好看的button 不一樣的瀏覽器須要兼容 寫法

border-image:圖片邊框

text-shadow:文字陰影

linear-gradient: 線性漸變也須要兼容寫法 如下寫法中參數無非就是從什麼方向變到什麼方向（左到右、上到下，左上到右下...），顏色變化（能夠設定多個顏色點），還有透明度

有了以上基礎就能夠作很漂亮的按鈕了。請看如下代碼。

核心的CSS樣式（主要運用以上特性）：

.button {
display: block; 
font-size: 12px; 
text-decoration: none!important; 
font-family: Helvetica, Arial, sans serif;
padding: 8px 12px; 
border-radius: 3px; 
-moz-border-radius: 3px; //
box-shadow: inset 0px 0px 2px #fff;
-o-box-shadow: inset 0px 0px 2px #fff;
-webkit-box-shadow: inset 0px 0px 2px #fff;
-moz-box-shadow: inset 0px 0px 2px #fff;
}
.button:active {
box-shadow: inset 0px 0px 3px #999;
-o-box-shadow: inset 0px 0px 3px #999;
-webkit-box-shadow: inset 0px 0px 3px #999;
-moz-box-shadow: inset 0px 0px 3px #999;
}

/* The styles for the grey button */
.grey {
color: #444;
border: 1px solid #d0d0d0;
background-image: -moz-linear-gradient(#ededed, #e1e1e1);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e1e1e1), to(#ededed));
background-image: -webkit-linear-gradient(#ededed, #e1e1e1);
background-image: -o-linear-gradient(#ededed, #e1e1e1);
text-shadow: 1px 1px 1px #fff;
background-color: #e1e1e1;
}
.grey:hover {
border: 1px solid #b0b0b0;
background-image: -moz-linear-gradient(#e1e1e1, #ededed);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#e1e1e1));
background-image: -webkit-linear-gradient(#e1e1e1, #ededed);
background-image: -o-linear-gradient(#e1e1e1, #ededed);
background-color: #ededed;
}
.grey:active {border: 1px solid #666;}

/* The styles for the yellow button */
.yellow {
color: #986a39;
border: 1px solid #e6b650;
background-image: -moz-linear-gradient(#ffd974, #febf4d);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#febf4d), to(#ffd974));
background-image: -webkit-linear-gradient(#ffd974, #febf4d);
background-image: -o-linear-gradient(#ffd974, #febf4d);
text-shadow: 1px 1px 1px #fbe5ac;
background-color: #febf4d;
}
.yellow:hover {
border: 1px solid #c1913d;
background-image: -moz-linear-gradient(#febf4d, #ffd974);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffd974), to(#febf4d));
background-image: -webkit-linear-gradient(#febf4d, #ffd974);
background-image: -o-linear-gradient(#febf4d, #ffd974);
background-color: #ffd974;
}
.yellow:active {border: 1px solid #936b26;}HTML

<div style="padding-top:100px; text-align:center; width:100px;padding-left:100px;">
<a href="#" class="button grey">Download</a>
<a href="#" class="button black">Download</a>
<a href="#" class="button yellow">Download</a>

</div>

　　來個效果圖吧

                                                                           

完整展現demo，猛戳這裏

結束語

您有收穫嗎？

但願我沒有浪費您的時間。

謝謝您的耐心閱讀。

若有錯誤及時更正。