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