CSS3新特性[转]

新的选择器

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

这三个特性和动画相关。

transition

这个属性可以在为元素从一种样子变成另一种样子的过程添加动画效果。

简写方法：

div {    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;}

其中，四个参数分别表示：

transition-property: 规定应用过渡的CSS属性的名称。transition-duration: 规定完成过渡效果需要多长时间。transition-delay: 规定过渡效果何时开始，默认是0。transition-timing-function: 规定过渡效果的时间曲线，默认是”ease”，还有linear、ease-in、ease-out、ease-in-out和cubic-bezier等过渡类型。

transform

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转换元素定义透视视图。

animation

Animation让CSS有了可以制作动画的功能：

@-webkit-keyframes anim1 {    0% {         opacity: 0;         font-size: 12px;    }    100% {         opacity: 1;         font-size: 24px;    } } .anim1Div {    -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新增了三个边框属性：分别是border-radius、box-shadow和border-image。
border-radius可以创建圆角边框；
box-shadow可以为元素添加阴影；
border-image可以使用图片来绘制边框。

背景

CSS3新增了几个关于背景的属性，分别是：background-clip、background-origin、background-size和background-break。

文字效果

word-wrap

强制换行。

text-overflow

可以显示省略号的那个～

它与word-wrap是协同工作的，word-wrap设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow则设置或检索当当前行超过指定容器的边界时如何显示。对于“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。

text-decoration

文本阴影。

字体@font-face

@font-face {    font-family: myFirstFont;    src: url('Sansation_Light.ttf'),         url('Sansation_Light.eot'); /* IE9+ */}div{    font-family:myFirstFont;}

用户界面

resize

resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。

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)，此属性表现为怪异模式下的盒模型。