除了html5的新特性，CSS3的新特性也是面试中经常被问到的。选择器CSS3中新增了很多选择器，解决了很多以前需要用javascript解决的布局问题。element1~element2：选择前面有element1元素的每个element2元素。E:first-of-type：选择作为其父元素的第一个E元素的每个E元素。E:last-of-type：选择作为其父元素的最后一个E元素的每个E元素。E:only-of-type：选择作为其父元素的唯一E元素的每个E元素。E:only-child：选择每个作为其父元素的唯一子元素的E元素。E:nth-child(n)：选择作为其父元素的第n个子元素的每个E元素。E:nth-last-child(n)：选择作为其父元素的最后n个子元素的每个E元素。E:nth-of-type(n)：选择作为其父元素的第n个E元素的每个E元素。E:nth-last-of-type(n)：选择作为其父元素的最后第n个E元素的每个E元素。E:last-child：选择作为其父元素的最后一个子元素的每个E元素。:root：选择文档的根元素。E:empty：选择所有没有子元素的E元素（包括文本节点）。E:target：选择当前激活的E元素。E:enabled：选择每个启用的E元素。E:disabled：选择每个禁用的E元素。E:checked：选择每个选中的E元素。E:not(selector)：选择所有不是选择器元素的元素。E::selection：选择元素中用户选中的部分。Transition、Transform和Animation这三个特性是CSS3新增的与动画相关的特性。TransitionTransition可以在元素从一种样式更改为另一种样式时向元素添加效果，而无需使用Flash动画或JavaScript。Transition具有以下属性：transition-property：指定应用过渡的CSS属性的名称。transition-duration：指定完成转换需要多长时间。transition-delay：指定过渡效果何时开始，默认为0。transition-timing-function：指定过渡效果的时序曲线，默认为“ease”，也有linear、ease-in、ease-out、ease-in-out和cubic-bezier等过渡类型。transition：简写属性，用于在一个属性中设置四个过渡属性。在使用所有过渡属性的示例中，如下所示：div{transition-property:width;过渡持续时间：1s；转换时间函数：线性；转换延迟：2s；/*Firefox4*/-moz-transition-property:width;-moz-过渡持续时间：1s；-moz-transition-timing-function:linear;-moz-transition-delay:2s;/*Safari和Chrome*/-webkit-transition-property:width;-webkit-过渡持续时间：1s；-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;/*Opera*/-o-transition-property:width;-o-过渡持续时间：1s；-o-transition-timing-function:linear;-o-transition-delay:2s;}使用transition属性简写如下：div{transition:width1slinear2s;/*Firefox4*/-moz-transition:width1slinear2s;/*Safari和Chrome*/-webkit-transition:width1slinear2s;/*Opera*/-o-transition:width1slinear2s;}TransformTransform用于对元素应用各种2D和3D变换，这个属性允许我们旋转、缩放、移动或倾斜元素。像这样使用它：div{transform:rotate(7deg);-ms变换：旋转（7度）；/*IE9*/-moz-transform:rotate(7deg);/*Firefox*/-webkit-transform:rotate(7deg);/*Safari和Chrome*/-o-transform:rotate(7deg);/*Opera*/}变换类型transform可以有多种变换类型，即属性值：none：定义没有变换。matrix(n,n,n,n,n,n)：使用包含六个值的矩阵定义二维变换。matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：使用16个值的4x4矩阵定义3D变换。translate(x,y)：定义二维位移平移。translate3d(x,y,z)：定义3D位移平移。translateX(x)：定义位移平移，只用X轴的值。translateY(y)：定义位移平移，只用Y轴的值。translateZ(z)：定义一个3D位移平移，只使用Z轴的值。scale(x,y)：定义二维缩放变换。scale3d(x,y,z)：定义3D缩放变换。scaleX(x)：通过设置X轴的值来定义缩放变换。scaleY(y)：通过设置Y轴的值来定义缩放变换。scaleZ(z)：通过设置Z轴的值来定义一个3D缩放变换。rotate(angle)：定义一个二维旋转，在参数中指定角度。rotate3d(x,y,z,angle)：定义3D旋转。rotateX(angle)：定义沿X轴的3D旋转。rotateY(angle)：定义沿Y轴的3D旋转。rotateZ(angle)：定义沿Z轴的3D旋转。skew(x-angle,y-angle)：定义沿X轴和Y轴的2D倾斜变换。skewX(angle)：定义沿X轴的2D倾斜变换。skewY(angle)：定义沿Y轴的2D倾斜变换。perspective(n)：定义3D变换元素的透视图。浏览器支持InternetExplorer10、Firefox、Opera支持transform属性。InternetExplorer9支持替代的-ms-transform属性（仅适用于2D转换）。Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）。Opera仅支持2D转换。AnimationAnimation让CSS具备制作动画的能力。使用CSS3Animation制作动画我们可以省去复杂的js代码。使用方法大致如下：@-webkit-keyframesanim1{0%{opacity:0;字体大小：12px；}100%{不透明度：1;字体大小：24px；}}.anim1Div{-webkit-animation-name:anim1;-webkit-动画持续时间：1.5s；-webkit-animation-iteration-count:4;-webkit-动画方向：交替；-webkit-animation-timing-function：缓入缓出；使用方法请参考教程：CSS3Animation。BorderCSS3新增了三个边框属性，分别是border-radius、box-shadow和border-image。border-radius可以创建圆角边框，box-shadow可以给元素添加阴影，border-image可以使用图片绘制边框。IE9+支持border-radius和box-shadow属性。Firefox、Chrome和Safari支持所有新的边框属性。背景CSS3添加了几个背景属性，即background-clip、background-origin、background-size和background-break。background-clipbackground-clip属性用于确定背景绘图区域。有几个可能的属性：background-clip:border-box;背景从边框开始显示background-clip:padding-box;背景从填充开始显示背景剪辑：内容框；背景显示内容区开始显示background-clip:no-clip;default属性相当于border-box的正常情况。背景覆盖了整个元素。使用此属性设置背景颜色或图像覆盖范围。background-clipbackground-clip属性用于确定背景的位置。它通常与background-position结合使用，background-position可以根据border、padding和content来计算（就像background-clip一样）。背景来源：边框框；从边框background-positionbackground-origin:padding-box计算；从填充background-positionbackground-origin:content-box计算；calculatefromcontentbackground-positionbackground-sizebackground-size属性是常用的调整背景图片的大小，主要用来设置图片本身。以下属性是可能的：background-size:contain;缩小图像以适合元素（保持像素纵横比）background-size:cover;扩展元素以填充元素（保持像素纵横比）background-size:100px100px;将图片缩小到指定尺寸background-size:50%100%;将图片缩小到指定大小，百分比是相对于包含元素的大小background-break在CSS3中，可以将元素分成几个独立的框（比如让内联元素跨越多行），background-break属性用于控制背景在这些不同框中的显示方式。背景中断：连续；默认值。忽略boxes之间的距离（即元素没有被分割成多个boxes，仍然是一个整体）background-break:bounding-box;计算盒子之间的距离；背景中断：每个盒子；是每个盒子单独重绘背景。文本效果word-wrap在CSS3中，word-wrap属性允许您允许文本强制文本换行，这意味着单词将被拆分。所有主流浏览器都支持word-wrap属性。p{word-wrap:break-word;}text-overflow与word-wrap配合使用，word-wrap设置或获取当前行超出指定容器边界时是否换行，text-overflow设置或检索当当前行超出指定容器的边界时如何显示。对于“text-overflow”属性，有两个选项：“clip”和“ellipsis”。text-shadow在CSS3中，text-shadow可以对文本应用阴影。能够指定水平阴影、垂直阴影、模糊距离和阴影颜色。h1{text-shadow:5px5px5px#FF0000;}text-decorationCSS3开始支持对文本进行更深层次的渲染，具体有3个属性可以设置：text-fill-color：设置文本内部填充颜色text-stroke-color：设置文字边框的填充颜色text-stroke-width：设置文字边框的宽度GradientCSS3增加了渐变效果，包括linear-gradient（线性渐变）和radial-gradient（径向渐变）。具体使用参考教程：CSS3Gradient@font-facefeature在CSS3之前，网页设计者不得不使用用户电脑上已经安装好的字体。使用CSS3，网页设计师可以使用他们喜欢的任何字体。当您找到或购买了您想要使用的字体时，您可以将字体文件存储在网络服务器上，需要时它会自动下载到用户的电脑上。字体在CSS3@font-face规则中定义。Firefox、Chrome、Safari和Opera支持.ttf（TrueType字体）和.otf（OpenType字体）类型的字体。IE9+支持新的@font-face规则，但只支持.eot类型的字体（EmbeddedOpenType）。在新的@font-face规则中，必须先定义字体的名称（如myFont），然后指向字体文件。要为HTML元素使用字体，请通过font-familyattribute(myFont)@font-face{font-family:myFirstFont;引用字体名称src:url('Sansation_Light.ttf'),url('Sansation_Light.eot');/*IE9+*/}div{font-family:myFirstFont;}多栏布局通过CSS3，可以创建多栏布局文字。IE10和Opera支持多列属性。Firefox需要前缀-moz-，Chrome和Safari需要前缀-webkit-。共有三个主要属性：column-count：指定元素应该分隔的列数。column-gap：指定列之间的间距。column-rule:设置列之间的宽度、样式和颜色规则div{-moz-column-count:3;/*Firefox*/-webkit-column-count:3;/*Safari和Chrome*/column-count:3;-moz-column-gap:40px;/*Firefox*/-webkit-column-gap:40px;/*Safari和Chrome*/column-gap:40px;-moz-column-rule:3px开始#ff0000;/*Firefox*/-webkit-column-rule:3pxoutset#ff0000;/*Safari和Chrome*/column-rule:3pxoutset#ff0000;}UICSS3中的新UI特性包括调整元素大小、框大小和轮廓等。Firefox、Chrome和Safari支持resize属性。IE、Chrome、Safari和Opera支持box-sizing属性。Firefox需要前缀-moz-。所有主流浏览器都支持outline-offset属性，除了IE。resizeresize属性指定元素是否可以由用户调整大小。如果想让这个属性生效，需要设置元素的overflow属性，取值可以是auto、hidden或者scroll。div{调整大小：两者；/*无|两者|水平|垂直;*/overflow:auto;}box-sizingbox-sizing属性可以设置为content-box、border-box和inherit。content-box：padding和border不包括在定义的宽度和高度中。对象的实际宽度等于设置的宽度值与border和padding之和，即（Elementwidth=width+border+padding）。此属性在标准模式下表示为盒模型。border-box：padding和border包含在定义的宽度和高度内。对象的实际宽度等于设置的宽度值。即使定义了border和padding，也不会改变对象的实际宽度，即(Elementwidth=width)。此属性在怪异模式下表示为盒模型。outline-offsetoutline-offset属性偏移轮廓并将其绘制到边框边缘之外。
