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，猛戳这里
结束语
您有收获吗？
希望我没有浪费您的时间。
谢谢您的耐心阅读。
如有错误及时更正。
