CSS3新特性

CSS3 边框：

border-radius（倒圆角）
box-shadow  （盒子阴影）
border-image （边界图片）

CSS3 背景：

background-size（属性规定背景图片的尺寸。）
background-origin（属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域）

CSS3 文本效果：

text-shadow（可向文本应用阴影，可以设置水平阴影、垂直阴影、模糊距离，以及阴影的颜色）
word-wrap（word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分）

CSS3 字体：

 @font-face

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

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

div
{
　　font-family:myFirstFont;
}
</style>

CSS3 2D 转换：

translate()  通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
rotate()      通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
scale()       通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
skew()       通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
matrix()     matrix() 方法把所有 2D 转换方法组合在一起。  matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

CSS3 3D 转换：

rotateX()  通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
rotateY()  通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

CSS3 过渡：

transition （注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：）

CSS3 动画：（@keyframes 规则用于创建动画。）

CSS3 多列：

column-count（column-count 属性规定元素应该被分隔的列数：）
column-gap（column-gap 属性规定列之间的间隔：）
column-rule（column-rule 属性设置列之间的宽度、样式和颜色规则。）

CSS3 用户界面：

resize （resize 属性规定是否可由用户调整元素尺寸。）
box-sizing （box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。）
outline-offset （outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。）

轮廓与边框有两点不同：
轮廓不占用空间
轮廓可能是非矩形

CSS3 多媒体查询：（主要用于响应式布局）

@media not|only mediatype and (expressions) {
　　CSS 代码...;
}

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备，这个应该经常看到。

CSS3 渐变（Gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。