1、渐变
1.1 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background: linear-gradient(direction, color-stop1, color-stop2, ...);
1.2 径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(center, shape size, start-color, ..., last-color);
2、转换
2.1 2D 转换
1）translate() 方法：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
2）rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
3）scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
4）skew() 方法，包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
5）matrix(n,n,n,n,n,n)：定义 2D 转换，使用六个值的矩阵。
2.2 3D 转换
1） rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
2） rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
3）属性：
4）方法
3、过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。
例：div { transition: width 2s; }
练习：鼠标移上去时改变宽高，背景，并旋转
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
.box{ 300px;height: 300px;background: lightseagreen;transition: 1s;}
.box:hover{ 400px;height: 400px;background: #286CC9;transform:rotateY(180deg);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4、动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
实际用时：首先定义一个动画，然后作用到元素上。
4.1 示例
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
div { animation: myfirst 5s; }
4.2 动画属性
5、多列（简单了解）
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
6、用户界面
6.1 resize属性指定一个元素是否应该由用户去调整大小
div { resize:both; overflow:auto; }
6.2 box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
6.3 outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
7、弹性盒子(Flex Box)
7.1 定义
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
7.2 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
7.3 Flex在移动端开发中应用较多，会使页面布局更加简洁，显示更友好，用户体验更好。例如，比较难实现的垂直居中，用flex可以轻松实现。
具体可以查看这两篇文章：
Flex布局语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex布局实例篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
8、多媒体查询
语法：
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) { CSS 代码...; }
个人体会：css3可以让页面变的更加丰富多彩，让页面动起来。属性很多，最好的学习方法就是实践，每个属性试一下效果，就能明白了。