CSS3新特性

CSS即层叠样式表（Cascading StyleSheet），在制作网页的时候我们通常采用CSS对页面的布局、字体、颜色还有其他的效果实现提供更加精确的控制。CSS3是CSS的升级版本，今天就简单介绍一下CSS3几个重要的新特性。

CSS3选择器
CSS设置的属性之所以能绑定到相应的节点依靠的就是CSS选择器。

代码段1.CSS选择器body > .mainContainer div > span[5] {        background-color : white;        ……}

此处CSS选择器为：“body > .mainContainer div > span[5]”代表的路径
即为：“body”标签直接子元素里class属性值为“mainContainer”的所有元素的，
后继元素标签为“div”的所有直接子元素中，
第5个标签为“span”的元素。

现在CSS3提供了更多更加方便快捷的选择器。

代码段2.CSS3选择器body > .mainContainer tbody:nth-child(even){        background-color : white;}body > .mainContainer tbody:nth-child(odd){        background-color : black;}: not(.textinput){        font-size : 12px;}div : first-child{        border-color : red;}

如上，列举了常用的几种CSS3选择器，这些新特性解决了许多之前需要用javascript解决的问题。
tbody : nth-child(even)，nth-child(odd)：此处分别表示了表格（tbody）下面的偶数行和奇数行（tr），这种样式适用于表格，可以清晰看出行与行的差别。正常使用也相较于之前的版本更加易于理解。
:not(.textinput)：这里表示所有class属性不包括“textinput”的节点。
div : first-child : 表示所有div节点下的第一个直接子节点

除此之外，还有许多新增的选择器，如下图所示：

@font-face特性
font-face可以用来加载字体样式，相比于老版本的字体加载方式，他不仅可以显示客户端安装的字体，也可以加载服务器端的字体。

代码段3.CSS字体设置<p><font style =“font-family : arial”> arial curier verdana </font></p>

代码段4.CSS3字体设置/*客户端字体*/<p><font face=“arial”> arial curier verdana </font></p>/*服务器端字体*/@font-face{        font-family : Runic;        src : url(RUNICMTO.eot);}.event{        font-size : 110px;        color : black;        font-familt : “Runic”}

代码段4中声明了服务器端字体Runic指向字体源“RUNICMTO.eot”文件，并冠以“Runic”的字体名称。
这项新特性的优点在于如果开发过程中需要使用特殊字体，而又不确定客户端是否安装该字体时，可以使用这种方式开发。

CSS3渐变效果
为了实现一些酷炫的界面，单一的颜色设置是不足以的，CSS3提供了颜色渐变的效果，如果可以灵活运用，可以实现不一样的特效。
linear-gradient( gradient_line, color1, color2, … )

线性渐变

代码段5.线性渐变background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

第一段代码gradient-line表示渐变方向，此处水平渐变即为linear，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。第二段代码中“color-stop”为拐点，是一个33%处为绿色，66%处为橙色的水平渐变。

径向渐变

代码段6径向渐变backgroud: -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

这一段代码中，redial代表径向渐变，不是从一个点到一个点的渐变，而是从一个圆到一个圆的渐变。
需要注意的是径向渐变是由外到内的渐变，“50 50，50”表示起始圆的圆心和半径，“50，50，0”是目标圆的圆心和半径。代码段中标识的两个同心圆外圆半径为 50px，内圆半径为 0，那么就是从黑色到红色再到蓝色的正圆形渐变。
当然不一定两个圆的圆心就是重合的，可以尝试一些骚操作，比如说让目标圆圆心偏移，可以实现来自顶部的漫射光，类似于开了盏灯的效果。

代码段7.漫射光backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));

CSS3的Transitions
Transition具体属性包括：
transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡
transition-duration：用于指定这个过渡的持续时间
transition-delay：用于制定延迟过渡的时间
transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

代码段8.transition<div id="transDiv" class="transStart"> transition </div> .transStart {    background-color: white;    -webkit-transition: background-color 0.3s linear;    -moz-transition: background-color 0.3s linear;    -o-transition: background-color 0.3s linear;    transition: background-color 0.3s linear; } .transEnd {    background-color: red; }

上述代码说明的是：这里 id 为“transDiv”的 div，当它的初始“background-color”属性变化时（被 JavaScript 修改），会呈现出一种变化效果，持续时间为 0.3 秒，效果为均匀变换（linear）。如：该 div 的 class 属性由“transStart”改为“transEnd”，其背景会由白（white）渐变到红（red）。

CSS3的Transform
Transform所能实现的有拉伸，压缩，旋转，偏移等图形的基本变换，过程不难，我们根据代码来看。

代码段9.transform.skew { -webkit-transform: skew(50deg); } .scale { -webkit-transform: scale(2, 0.5); } .rotate { -webkit-transform: rotate(30deg); } .translate { -webkit-transform: translate(50px, 50px); } .all_in_one_transform { -webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px); }

Skew意味倾斜，skew(x-angle,y-angle)定义沿着X和Y轴的倾斜转换；scale(x,y)则为X和Y的缩放转换；rotate(angle)即为旋转转换；translate(x,y)即为X和Y轴上的平移转换。