CSS3 新属性（更新至11-08）
1.transition属性
Transition属性主要是用来对某个CSS属性的变化过程进行控制。动画属性
Transition又包含了四个子属性，分别为property、duration、timing-function、delay。
①transition-property:
property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时，则设置property值为background。
②transition-duration: duration针对了过渡效果的持续时间。
③transition-timing-function：
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]
④transition-delay: duration针对了过渡效果的延迟执行时间。
代码演示：
1). 过渡单个属性：
transition-property:opacity;
transition-duration:2s;
transition-timing-function:ease-in;
transition-delay:0;
2). 过渡多个属性：
[1]. 上下一一对应型：
transition-property:opacity left;
transition-duration:2s, 4s;
transition-timing-function:ease-in;
transition-delay:0;
此时：opacity过渡时间为2s，left过渡时间为4s。
[2]. 循环对应型：
transition-property:opacity left width height;
transition-duration:2s, 4s;
transition-timing-function:ease-in;
transition-delay:0;
此时：opacity和width过渡时间为2s，left和height过渡时间为4s。
3). transition简写模式： 顺序为：transition-property ，transition-duration， transition-timing-function， transition-delay
/*单个属性：*/ -moz-transition:background 0.5s ease-out 0s;
/*多个属性：*/ -moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;
HTML代码： <a href="http://www.ihiro.org/" target="_blank">ihiro.org</a>
CSS代码： <a href="http://www.ihiro.org/" target="_blank">ihiro.org</a>
a { display:block; width:160px; height:30px; line-height:30px; text-align:center; padding:10px; background:#33589f; color:#fff; text-decoration:none; text-transform:uppercase; /*只有当鼠标移出后才处理*/ -moz-transition:background 0.2s linear 0s; }
a:hover { background:#263c7b; color:#f60; text-shadow:2px 2px 10px #f00; /* 只有当鼠标移入时才处理 注：若a:hover中不写transition,则会继承a中的transition */
/* 1. 单个属性 -moz-transition:background 0.5s ease-out 0s;
2. 多个属性： -moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s; */ -moz-transition:background 0.5s ease-out, color 0.4s ease-out, text-shadow 0.3s linear; }
2.CSS3增加字体阴影 text-shadow：
此属性有4个值，前两个值分别表示水平方向位移距离和垂直方向的位移距离，第三个值表示阴影的模糊半径（包含0及以下的值均表示无模糊），最后一个则是阴影的颜色，为了更方便大家理解次属性的这四个值，W3Cfuns特意为大家做了下图，虽比较简单，但是能够很清楚的理解这四个值。
如text-shadow:-5px 5px 5px #dfdfdf。
3.CSS3盒模型阴影 box-shadow：
此属性与text-shadow一样有4个值，前两个值分别表示水平方向位移距离和垂直方向的位移距离，第三个值表示阴影的模糊半径（包含0及以下的值均表示无模糊），最后一个则是阴影的颜色，
【注】目前Chrome 16+，FireFox8+，Opera11.6+，Safari5.1+以及IE9+均可直接使用box-shadow，而不需要-webkit-诸如此类的前缀！其他低版本的浏览器没有做测试，次备注只作为参考。
4.CSS3圆角 border-radius
此属性值是以像素为单位的圆角半径，比如：
border-radius:3px; border-radius:5px; border-radius:8px;border-radius:10px；
但是在不同内核的浏览器下，其写法也有的差别，比如：
Chrome & Safari:-webkit-border-radius:5px;
FireFox:-moz-border-radius:5px;
Opera:-o-border-radius:5px;
IE9+:border-radius:5px;
设置某一个角为圆角的写法。统一的写法：
左上角：border-top-left-radius:5px;
右上角：border-top-right-radius:5px;
左下角：border-bottom-left-radius:5px;
右下角：border-bottom-right-radius:5px;
5.CSS3变形处理：Transform 旋转
旋转：transform:rotate(*)
如果想要让指定的元素旋转，只需要按照如下方式定义即可：
#content{transform:rotate(45deg);}
rotate：表示旋转的意思，其值为角度（旋转方向为顺时针）；
deg：是CSS3的“Values and Units”模块中定义的一个角度单位；
浏览器支持：Chrome8+, FireFox4+, Opera10+,Safari3.1+
[注]IE9不支持此属性
此属性在不同的浏览器下不同的写法
Chrome & Safari:-webkit-transform:rotate(45deg);
FireFox:-moz-transform:rotate(45deg);
Opera:-o-transform:rotate(45deg);
不可忽略掉属性之前的前缀，否则无效！
缩放：transform:scale(num，num)
使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。譬如“scale(0.5)”表示缩小50%，“scale(2)”表示放大1倍。此方法可设置两个值，分别表示水平和垂直方向，设置一个参数，则第二个参数默认取第一个。
此属性在不同的浏览器下不同的写法
比如缩小50%:
Chrome & Safari:-webkit-transform:scale(0.5);
FireFox:-moz-transform:scale(0.5);
Opera:-o-transform:scale(0.5);
不可忽略掉属性之前的前缀，否则无效！
倾斜：transform:skew(num，num)
使用skew方法来实现指定元素的倾斜角度，它有两个参数值，分别表示水平方向的倾斜角度和垂直方向的倾斜角度。第二个参数可省略。
比如#box{transform:skew(-45deg, 20deg); -moz-transform:skew(-45deg, 20deg); -o-transform:skew(-45deg, 20deg); transform:skew(-45deg, 20deg);}
deg：是CSS3的“Values and Units”模块中定义的一个角度单位；
[注]此属性在不同浏览器下同样也要加上相对应的前缀；
translate移动
在参数中分别制定水平方向上的移动距离和垂直方向上的移动距离，比如translate(50px, 50px);表示水平和垂直方向上均移动50个像素。
与众多CSS属性一样，translate既然有水平方向和垂直方向，那么我们也可以单一的写某一个方向:
translateX();//表示水平方向 translateY();//表示垂直方向
