CSS3新增了哪些特性

边框

border-radius：为元素添加圆角边框，border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性；

border-radius: 10px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

border-radius: 10px 20px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 20px;

border-radius: 10px 20px 30px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;

box-shadow：向框添加一个或多个阴影。
语法：box-shadow: 水平位移 垂直位移 [模糊半径 阴影尺寸 阴影颜色 inset(内部阴影)];

box-shadow: 10px 10px 5px #888888;

border-image：设置边框图像，该属性是一个简写属性，用于设置以下属性：

• border-image-source：边框的图片的路径；
• border-image-slice：图片边框向内偏移；
• border-image-width：图片边框的宽度；
• border-image-outset：边框图像区域超出边框的量；
• border-image-repeat：图像边框是否应平铺(repeate)、铺满(round)或拉伸(stretch)。

border-image: url(/i/border.png) 30 30 round;

背景

background-size：背景图片的尺寸。

background-size: 100px 100px;	/* 第一个值设置宽度，第二个值设置高度 */
background-size: 50% 50%;		/* 以父元素的百分比来设置背景图像的宽度和高度 */
background-size: cover;			/* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 */
background-size: contain;		/* 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 */

background-origin：规定 background-position 属性相对于什么位置来定位。

background-origin: padding-box;			/* 背景图像相对于内边距框来定位（默认值） */
background-origin: border-box;			/* 背景图像相对于边框盒来定位 */
background-origin: content-box;			/* 背景图像相对于内容框来定位 */

background-clip：规定背景的绘制区域。

background-clip: padding-box;			/* 背景被裁剪到内边距框 */
background-clip: border-box;			/* 背景被裁剪到边框盒（默认值） */
background-clip: content-box;			/* 背景被裁剪到内容框 */

渐变

linear-gradient()：线性渐变。
语法：background: linear-gradient(方向, start-color, ..., last-color);

background: linear-gradient(red, blue); /* 省略方向默认从上到下 */
background: linear-gradient(to right, red , blue);	/* 从左侧开始的线性渐变，从红色开始，转为蓝色 */
background: linear-gradient(to bottom right, red , blue); /* 从左上角到右下角的线性渐变 */

radial-gradient()：径向渐变。
语法：background: radial-gradient(圆的类型 渐变的大小 at 渐变的位置, start-color, ..., last-color);

类型	值
圆的类型	ellipse (默认)：椭圆形 circle ：圆形
渐变的大小	farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
渐变的位置	center（默认）：设置中间为径向渐变圆心的纵坐标值 top：设置顶部为径向渐变圆心的纵坐标值 bottom：设置底部为径向渐变圆心的纵坐标值

background: radial-gradient(red, yellow, green); /* 椭圆形渐变 */
background: radial-gradient(circle, red, yellow, green); /* 圆形渐变 */
background: radial-gradient(red 10%, green 50%, blue 100%); /* 颜色结点不均匀分布 */
background: radial-gradient(at 50% 50%, blue, green, yellow); /* 圆心在中间 */
background: radial-gradient(closest-side at 60% 55%, blue, green, yellow); /* 圆心在离左侧60%，离上侧50%的地方，半径长度为从圆心到离圆心最近的边 */

文本效果

word-break：定义如何换行。

值	含义
normal	使用浏览器默认的换行规则
break-all	允许在单词内换行
keep-all	只能在半角空格或连字符处换行

word-wrap：允许长的内容可以自动换行。

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）
break-word	在长单词或 URL 地址内部进行换行

text-overflow：指定当文本溢出包含它的元素，应该发生什么。

值	描述
clip	修剪文本
ellipsis	显示省略符号来代表被修剪的文本
string	使用给定的字符串来代表被修剪的文本（只在 Firefox 浏览器下有效）

text-shadow：文字阴影。
语法：text-shadow: 水平位移 垂直位移 [模糊半径 阴影颜色];

转换

transform：应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
语法：transform: none（默认)|transform-functions;

transform-origin：允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
语法：transform-origin: x-axis y-axis z-axis;

轴	值
X轴	left center right length（如100px） %（如0%）
Y轴	top center bottom length（如100px） %（如0%）
Z轴	length（如100px）

transform-origin: 0% 0%;	/* 将元素左上角设为旋转点 */

transform-style：指定嵌套元素是怎样在三维空间中呈现。

值	含义
flat	所有子元素在2D平面呈现
preserve-3d	所有子元素在3D空间中呈现

2D转换方法

rotate(angle)：定义 2D 旋转，在参数中规定角度。

translate(x,y)：指定元素在二维空间中的位移。X轴方向向右，Y轴方向向下。
translateX(n)：指定元素在X轴中的位移。
translateY(n)：指定元素在Y轴中的位移。

scale(n)：定义 2D 缩放转换。

transform: scale(2);	/* 放大两倍 */

scaleX(n)：定义 X 轴方向的缩放转换。
scaleY(n)：定义 Y 轴方向的缩放转换。

matrix(a,b,c,d,e,f)：定义 2D 转换，使用六个值的矩阵。

值	含义
a	水平缩放
b	水平倾斜
c	垂直倾斜
d	垂直缩放
e	水平移动
f	垂直移动

transform: matrix(2, 1, 0, 2, 50, 50);	/* 水平放大两倍，水平倾斜，垂直放大两倍，水平向左移动50%，垂直向下移动50% */

skew(x-angle,y-angle)：定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)：定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)：定义沿着 Y 轴的 2D 倾斜转换。

3D转换方法

perspective(n)：为 3D 转换元素定义透视视图。

值	描述
number	元素距离视图的距离，以像素计。
none	默认值。与 0 相同。不设置透视。

translate3d(x,y,z)：指定元素在三维空间中的位移。X轴方向向右，Y轴方向向下，Z轴方向向你。
translateX(x)：指定元素在X轴中的位移。
translateY(y)：指定元素在Y轴中的位移。
translateZ(z)：指定元素在Z轴中的位移。

scale3d(x,y,z)：定义 3D 缩放转换。
scaleX(x)：通过设置 X 轴的值来定义缩放转换。
scaleY(y)：通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)：通过设置 Z 轴的值来定义缩放转换。

rotate3d(x,y,z,angle)：定义 3D 旋转。
rotateX(x)：定义沿着 X 轴的 3D 旋转。
rotateY(y)：定义沿着 Y 轴的 3D 旋转。
rotateZ(z)：定义沿着 Z 轴的 3D 旋转。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义 3D 转换，使用 16 个值的 4x4 矩阵。

过渡

transition：设置元素当过渡效果，四个简写属性为：

• transition-property：过渡属性名。
  语法：transition-property: none|all| property;

• transition-duration：规定完成过渡效果需要花费的时间（以秒或毫秒计）。

  transition-duration: 0.5s;
  /* 相当于 */
  transition-duration: 500ms;
  

• transition-timing-function：指定切换效果的速度。

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

cubic-bezier(x1,y1,x2,y2)：贝塞尔曲线，是控制变化的速度曲线。

从上图中我们可以看到，cubic-bezier有四个点：
两个默认的，即：P0(0,0)，P3(1,1)；
两个控制点，即：P1(x1,y1)，P2(x2,y2)；
注：X轴的范围是0~1，超出cubic-bezier将失效，Y轴的取值没有规定，但是也不宜过大。
我们只要调整两个控制点P1和P2的坐标，最后形成的曲线就是动画曲线。

• transition-delay：指定何时将开始切换效果。

  transition-delay: 0.5s;	/* 等待0.5秒后过渡效果才开始 */
  /* 相当于 */
  transition-delay: 500ms;
  

动画

animation：为元素添加动画，是一个简写属性。
语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• animation-name：为 @keyframes 动画名称。
• animation-duration：动画指定需要多少秒或毫秒完成。
• animation-timing-function：设置动画将如何完成一个周期。

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

• animation-delay：设置动画在启动前的延迟间隔，可以是秒或毫秒。
• animation-iteration-count：定义动画的播放次数。

值	描述
n	一个数字，定义应该播放n次动画
infinite	指定动画应该播放无限次（永远）

• animation-direction：指定是否应该轮流反向播放动画。

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

• animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。该属性可重写该行为。

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

• animation-play-state：指定动画是否正在运行或已暂停。

值	描述
paused	指定暂停动画
running	指定正在运行的动画

@Keyframes规则：使用@keyframes规则，你可以创建动画。
语法：@keyframes animationname {keyframes-selector {css-styles;}}

值	说明
animationname	必需的。定义animation的名称。
keyframes-selector	必需的。动画持续时间的百分比。 合法值： 0-100% from (和0%相同) to (和100%相同) 注意： 您可以用一个动画keyframes-selectors。
css-styles	必需的。一个或多个合法的CSS样式属性

@keyframes mymove {
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}

Flex弹性布局

多媒体查询@media