CSS3的应用，你学会了吗？

开场白

　　CSS3相对于CSS2引入了很多的新的css属性和特效，利用css3实现了原来需要加入js才能模拟的效果，因此前端性能提高了很多。

各大浏览器厂商包括IE都逐渐的加大对CSS3 HTML5的支持，移动web前端的火热形式也对HTML5 CSS3起到了极大的推动作用。

一、快捷的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可以直接定位到第几个元素、奇数或偶数元素。

二、不用图片实现漂亮的按钮

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，猛戳这里

结束语

您有收获吗？

希望我没有浪费您的时间。

谢谢您的耐心阅读。

如有错误及时更正。