前言
之前我们已经给大家介绍了关于html5的新特性，除了html5的新特性，css3的新特性也是面试中经常被问到的。下面话不多说了，需要的朋友们跟随小编来一起看看详细的介绍吧。
选择器
css3中新添加了很多选择器，解决了很多之前需要用javascript才能解决的布局问题。
element1~element2: 选择前面有element1元素的每个element2元素。
[attribute^=value]: 选择某元素attribute属性是以value开头的。
[attribute$=value]: 选择某元素attribute属性是以value结尾的。
[attribute*=value]: 选择某元素attribute属性包含value字符串的。
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): 选择非selector元素的每个元素。
e::selection: 选择被用户选取的元素部分。
transition,transform和animation
这三个特性是css3新增的和动画相关的特性。
transition
transition可以在当元素从一种样式变换为另一种样式时为元素添加效果，而不用使用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: 简写属性，用于在一个属性中设置四个过渡属性。
在一个例子中使用所有过渡属性如下：
p { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* safari 和 chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; }
使用transition属性简写如下：
p { transition: width 1s linear 2s; /* firefox 4 */ -moz-transition:width 1s linear 2s; /* safari and chrome */ -webkit-transition:width 1s linear 2s; /* opera */ -o-transition:width 1s linear 2s; }
transform
transform用来向元素应用各种2d和3d转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜等操作。使用方式如下：
p{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* ie 9 */ -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): 定义2d转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 定义3d转换，使用16个值的4x4矩阵。
translate(x,y): 定义2d位移转换。
translate3d(x,y,z): 定义3d位移转换。
translatex(x): 定义位移转换，只是用x轴的值。
translatey(y): 定义位移转换，只是用y轴的值。
translatez(z): 定义3d位移转换，只是用z轴的值。
scale(x,y): 定义2d缩放转换。
scale3d(x,y,z): 定义3d缩放转换。
scalex(x): 通过设置x轴的值来定义缩放转换。
scaley(y): 通过设置y轴的值来定义缩放转换。
scalez(z): 通过设置z轴的值来定义3d缩放转换。
rotate(angle): 定义2d旋转，在参数中规定角度。
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转换元素定义透视视图。
浏览器支持
internet explorer 10、firefox、opera 支持 transform 属性。
internet explorer 9 支持替代的 -ms-transform 属性（仅适用于 2d 转换）。
safari 和 chrome 支持替代的 -webkit-transform 属性（3d 和 2d 转换）。
opera 只支持 2d 转换。
animation
animation让css拥有了可以制作动画的功能。使用css3的animation制作动画我们可以省去复杂的js代码。使用方法大概如下：
@-webkit-keyframes anim1 { 0% { opacity: 0; font-size: 12px; } 100% { opacity: 1; font-size: 24px; } } .anim1p { -webkit-animation-name: anim1 ; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 4; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; }
具体用法可以参考教程：css3 animation。
边框
css3新增了三个边框属性，分别是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-clip
background-clip属性用于确定背景画区，有以下几种可能的属性：
background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box; 背景显content区域开始显示
background-clip: no-clip; 默认属性，等同于border-box
通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。
background-origin
background-clip属性用于确定背景的位置，它通常与background-position联合使用，可以从 border、padding、content来计算background-position（就像background-clip）。
background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position
background-size
background-size属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：
background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸
background-break
css3中，元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。
background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-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: 5px 5px 5px #ff0000; }
text-decoration
css3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：
text-fill-color: 设置文字内部填充颜色
text-stroke-color: 设置文字边界填充颜色
text-stroke-width: 设置文字边界宽度
渐变
css3新增了渐变效果，包括linear-gradient(线性渐变)和radial-gradient(径向渐变)。具体用法参考教程：css3 gradient
@font-face特性
在css3之前，web设计师必须使用已在用户计算机上安装好的字体。通过css3，web设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上。字体是在 css3 @font-face 规则中定义的。firefox、chrome、safari以及opera支持 .ttf(true type fonts)和 .otf(opentype fonts)类型的字体。ie9+ 支持新的@font-face规则，但是仅支持 .eot类型的字体(embedded opentype)。
在新的@font-face规则中，必须首先定义字体的名称（比如myfont），然后指向该字体文件。
如需为html元素使用字体，请通过font-family属性来引用字体的名称 (myfont)
@font-face { font-family: myfirstfont; src: url('sansation_light.ttf'), url('sansation_light.eot'); /* ie9+ */ } p{ font-family:myfirstfont; }
多列布局
通过css3，能够创建多个列来对文本进行布局，ie10和opera支持多列属性。firefox 需要前缀-moz-，chrome和safari需要前缀-webkit-。主要有如下三个属性：
column-count: 规定元素应该被分隔的列数。
column-gap: 规定列之间的间隔。
column-rule: 设置列之间的宽度、样式和颜色规则
p{ -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 outset #ff0000; /* firefox */ -webkit-column-rule:3px outset #ff0000; /* safari and chrome */ column-rule:3px outset #ff0000; }
用户界面
css3中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。firefox、chrome以及safari 支持resize属性。ie、chrome、safari以及opera支持box-sizing属性。firefox需要前缀-moz-。
所有主流浏览器都支持outline-offset属性，除了ie。
resize
resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
p{ resize:both; /* none|both|horizontal|vertical; */ overflow:auto; }
box-sizing
box-sizing属性可设置的值有content-box、border-box和inherit。
content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 (element width = width + border + padding)，此属性表现为标准模式下的盒模型。
border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 (element width = width)，此属性表现为怪异模式下的盒模型。
outline-offset
outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
以上就是总结css3的新特性（面试必备）的详细内容。