最近研究css3一些新的特性,在这里和大家一起学习，一起分享，总的来说，CSS3有一下几大特性：
1.CSS3选择器
2.CSS3多背景
3.CSS3阴影
4.CSS3渐变
5.CSS3 transition 过度
6.CSS3 @keyframes 动画
7.CSS3 transform 变换
8.CSS3 @font-face字体
9.CSS3多列布局
10.CSS3圆角
一、CSS3选择器
css3选择器主要分为属性选择器和伪类选择器
一（1）属性选择器
div[name$='cc']{
/*name属性以cc结尾*/
}
div[name*='bb']{
/*name属性包含bb*/
}
div[name^='aa']{
/*name属性以aa开头*/
}
一（2）伪类选择器
li:nth-of-type(even){
/*选择同类型li的偶数行*/
}
li:nth-of-type(odd){
/*选择同类型li的奇数行*/
}
li:nth-child(n){
/*参数为n，表示选中所有行*/
}
li:nth-child(n+i){
/*参数为n+i时表示从第i行开始下面的都被选中*/
}
li:nth-child(2n){
/*2n表示2的倍数行被选中，即偶数行*/
}
li:nth-child(3n){
/*3n表示3的倍数行被选中。*/
}
li:nth-last-child(n){
/*nth-last-child和nth-child相反，倒着数就行了*/
}
二、CSS3多背景
在CSS3中background-image可以设置为多个背景，以及每个背景的位置，例如：
div{
background: url() no-repeat left center,url() no-repeat left center,url() no-repeat left center,url() no-repeat left center;
}
三、CSS3阴影
CSS3阴影可以分为文本阴影（text-shadow）和阴影（box-shadow）
三（1）文本阴影（text-shadow）
p{
color: red;
-webkit-text-shadow: 3px 3px 3px #eee;
-moz-text-shadow: 3px 3px 3px #eee;
-o-text-shadow: 3px 3px 3px #eee;
-ms-text-shadow: 3px 3px 3px #eee;
text-shadow: 3px 3px 3px #eee;
}
注意，由于各大浏览器对css3新特性的支持不同，需要在前面加上前缀，其有四个参数，分别为：1.横向偏移量 2.纵向偏移量 3.模糊半径（数值越高越模糊，反之越清晰）4.阴影颜色
三（2）块级阴影（box-shadow）
p{
color: red;
-webkit-box-shadow: 3px 3px 3px #eee;
-moz-box-shadow: 3px 3px 3px #eee;
-o-box-shadow: 3px 3px 3px #eee;
-ms-box-shadow: 3px 3px 3px #eee;
box-shadow: 3px 3px 3px #eee;
}
box-shadow有6个参数。1.投影方式（可选），不写默认外部阴影，inset代表内阴影 2&3.表示偏移量，与文字阴影类似 4.模糊半径（可选）5.阴影扩展半径（可选），值越大阴影范围越大 6.阴影颜色
当然，也可以有多级阴影：
p{
color: red;
box-shadow: 3px 3px 3px #eee,3px 3px 6px #red,3px 3px 9px #black;
}
四、 CSS3渐变
CSS3渐变分为线性渐变（linear-gradient）和径向渐变（radial-gradient）
四（1）线性渐变（linear-gradient）
做渐变时要用到backgroud-image，因为绘制渐变时，会被浏览器解析成为一张背景图片。
渐变第一个参数为起始位置：left表示从左到右 top表示从上到下，以此类推。之后可以设置多个颜色，颜色后可以设置渐变的起始位置（用百分比）。
p{
width: 100%;
height: 20px;
background-image: -webkit-linear-gradient(left,red %10,black %80);
background-image: linear-gradient(left,red %10,black %80);
}
四（2）径向渐变（radial-gradient）
径向渐变，顾名思义，是按圆的半径方向渐变
p{
width: 100%;
height: 20px;
background-image: -webkit-radial-gradient(left center,red %10,black %80);
background-image: radial-gradient(left center,red %10,black %80);
}
五、 CSS3 transition 过度
过渡，渐变的可视化，transition一共四个参数，当然不要忘记，要加上前缀，分开单独写这里就不介绍了
1.渐变属性，包括none：停止渐变，all：默认值，元素产生任何属性值变化时都执行渐变效果，通常情况下都用all， indent：指定元素的某一属性值；
2.渐变过程的持续时间，默认值为0；
3.变化的速率，ease：逐渐变慢，linear：匀速，ease-in：加速，ease-out：减速，ease-in-out：先加速后减速，cubic-bezier：自定义；
每个属性都可以设置其具体的贝塞尔曲线值，不过一般情况下用linear匀速就足够了，太另类显得非主流。
4.变化的延迟时间。
div{
width: 200px;
height: 200px;
color: red;
}
div:hover{
width: 400px;
height: 400px;
color: blue;
-webkit-transition: all .5s linear .5s;
transition: all .5s linear .5s;
}
六、 CSS3 @keyframes 动画
CSS3自带动画特性，可以不借助JS来完成一些简单的动画效果。
首先创建动画规则，最开头用@符号，后接浏览器前缀，后接keyframes，之后是自己定的动画名称。from表示起始状态，to表示结束状态，大括号内写CSS样式。
定义完动画规则后，在你想要加入该动画的元素上添加animation。共有4个参数：1.自定义的动画名称 2.动画完成所用时间 3.动画延迟4.infinite表示循环播放动画 5.变化速率。
@-webkit-keyframes first{
from{left: 0;top: 0;}
to{left: 100px;top: 100px;}
}
@-moz-keyframes first{
from{left: 0;top: 0;}
to{left: 100px;top: 100px;}
}
@-ms-keyframes first{
from{left: 0;top: 0;}
to{left: 100px;top: 100px;}
}
div{
width: 100px;
height: 100px;
position: absolute;
background: red;
-webkit-border-radius: 50px;
border-radius: 50px;
animation: first .5s 100ms infinite linear;
}
当然，@keyframes动画也可以以百分比的形式来写
@-webkit-keyframes first{
0% {left: 0;top: 0;}
50% {left: 50px;top: 50px;}
100% {left: 100px;top: 100px;}
}
七、CSS3 transform 变换
transform共五中变换形式
1.移动translate
2.旋转rotate
3.缩放scale
4.扭曲skew
5.矩阵matrix
七（1）移动translate
div{
width: 100px;
height: 100px;
background: gold;
-webkit-transform: translate(100px,0);
-moz-transform: translate(100px,0);
transform: translate(100px,0);
}
还可以写成translateX(x) translateY(y),表示只横向或纵向移动，括号里仅有一个参数。
七（2）旋转rotate
div{
width: 100px;
height: 100px;
background: gold;
/*顺时针旋转45度，负值为逆时针旋转*/
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
七（3）缩放scale
div{
width: 100px;
height: 100px;
background: gold;
}
div:hover{
/*放大2倍，scale(X,Y),其中X,Y表示横、纵向缩放倍数，基值为1。若大于1表示放大，
*小于1表示缩小，如scale(0.8,2.5)表示横向缩小到0.8倍，纵向放大到2.5倍。
* 与translate类似，缩放也可以单方向：scaleX(x)&scaleY(y)。
* */
-webkit-transform: scale(2);
-moz-transform: scale(2);
transform: scale(2);
}
七（4）扭曲skew
div {
width: 100px;
height: 100px;
background-color: seagreen;
-webkit-transform: skew(30deg,30deg);
}
扭曲skew这个属性还真的不好说，当然它可以用两个参数，表示X横向扭曲，Y纵向扭曲，也可以只写一个方向skewX(),skewY，至于矩阵变换有兴趣的同学可以去加深研究一下，这些东西在平时已经够用了。
八、CSS3 @font-face字体
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
在开发中经常用到的iconfont就是其中的一种运用方式：
/*iconfont图标设置*/
@font-face {
font-family: "iconfont";
src: url('iconfont.eot');
/* IE9*/
src: url('../font/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/iconfont.woff') format('woff'), /* chrome, firefox */
url('../font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../font/iconfont.svg#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
九、 CSS3多列布局
column多列布局有一下属性：
column-count：表示布局几列。
column-rule：表示列与列之间的间隔条的样式
column-gap：表示列于列之间的间隔
以webkit内核为例：
.column_style{
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
}
十、 CSS3圆角
圆角border-radios这一特性应用非常广泛，还可以用圆角来画圆形。其参数可以是1到4个：
1个参数表示四个角都应用该值；
2个参数表示左上、右下用第一个值，右上、左下用第二个值；
3个参数表示左上用第一个值，右上、左下用第二个值，右下用第三个值；
4个参数表示四个值依次用在左上、右上、右下、左下（逆时针）。
div{
width: 100px;
height: 100px;
background: red;
/*你猜是什么形状*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}