关键词： Linear Gradients ， Radial Gradients
CSS3动画
1. 移动端少用px rem 细致的每个盒子或盒子模型的大小等比例定义。
在手机端不要使用px 会不准确
em是相对于自身的字体大小来比例的
10em 10*14px = 140px
rem html 根元素的fontsize
2. html 默认的字体大小是16px
如果没有设置 ，会使用父级，或者body font-size
3. gradients（渐变）
CSS3 定义了两种类型的渐变（gradients）：
a. 线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向
b. 径向渐变（Radial Gradients）： 由它们的中心定义
linear Gradients （线性渐变）:
a.向同一个方向进行颜色渐变，上下左右对角线。
b. 语法：background: linear-gradient(to direction(方向), color-start, color-stop1, ... , color-end);
c. 第一个参数 to direction ,可以设置方向，如果不设置，默认自上到下。
to bottom(自上到下) to right(自左向右) to left(自右向左) to top(自下向上)
to top left(右下到左上) to top right(左下到右上) to bottom left(右上到左下) to bottom right(右上到左下)
0deg(从下到上) 90deg(从左到右) 180deg(从上到下) 270deg(从右到左) 360deg(从下到上) -90deg(从右到左)
d. 第二个参数color-start, color-stop1，color-stop2,....... ，颜色开始到颜色结束。
在颜色后面加百分比，就可以控制在整个宽度的百分之多少的时候到达某一个颜色值。
例子：background: linear-gradient(#3a1c71, #d76d77,#ffaf7b);
background: linear-gradient(#3a1c71, #d76d77 20% ,#ffaf7b 70%); //在#d76d77达到宽度20%的时候停止渐变。
background: linear-gradient(#3a1c71, #d76d77 80% ,#ffaf7b 90%)；//在#d76d77达到宽度80%的时候停止渐变。
线性渐变总写法：background: linear-gradient(to bottom,#3a1c71, #d76d77 80% ,#ffaf7b 90%);
radial-gradient（径向渐变）：
a.由一个中心点向外围渐变。
b. 语法：background: radial-gradient(size shape at position,start-color, ..., last-color);
size：半径，可不写；如果不写，默认为从中间开始，圆形。
如果写，单位为px。
如果传两个值，形状即为椭圆，第一个值为横向长度，第二个值为纵向长度。
如果传 closest-side farthest-side closest-corner farthest-corner ，表示不同的渐变大小尺寸。
shape: 形状，circle,ellipse 圆和椭圆，可忽略。
at position： 渐变的位置。
at + center/top/bottom/left/right : 表示渐变在中心，在上，在下，在左，在右。
at + (x,y) 左上角为 0px 0px
at + 百分比
start-color ,...last-color: 与线性渐变相同。
em
a. 浏览器的默认字体大小是16px
b. 如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height” ,
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
c. 如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
d. 那么元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：
1 ÷ 元素自身的font-size × 需要转换的像素值 = em值
备注：此文章根据实例总结而来，访问更多请点我的github
