1、background:linear-gradient(to top,blue,red) 兼容写法：background:-wbkit-linear-gradient(bottom,blue,red)
2、gradient分为linear-gradient（线性渐变）和radical-gradient（径向渐变），重复的线性渐变：repeat-linear-gradient()，重复的径向渐变repeat-radical-gradient()
3、radical-gradient( circle,20px 30px,red,blue)中的20px 30px 指的是圆心的水*和垂直位置 linear-gradient(20px 30px,red,blue)中的20px 30px 指的是渐*的水*和垂直半径
4、线性渐变
a、从上到下(默认情况下)：background：linear-gradient(red,blue);
b、从左到右：background：linear-gradient(to right,red,blue);
c、对角：background：linear-gradient(to bottom right,red,blue)
5、径向渐变
a、颜色节点均匀分布（默认情况）：background：radical-gradient(green,red,blue);
b、颜色节点不均匀分布：background：radical-gradient(green 15%,red 5%,blue 60%);
c、设置形状：background：radical-gradient(circle，green,red,blue);
（8）模糊和倒影
1、模糊：filter:blur(10px)
2、倒影（只有webkit内核支持，目前仅在Chrome，Safari，opera浏览器下支持）
-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
3、用线性渐变给图片加遮罩效果；用于遮罩的图片必须是png格式；
（9）动画（css3属性中有关制作动画的三个属性transition，transform和animation）
1、transition
a、transition-property:需要过渡的样式
b、transition-duration：运动时间
c、transition-delay：延迟时间
d、transition-timing-function：运动形式 ease(默认,慢速开始，然后变快，然后慢速)/linear(匀速)/ease-in(快速)/ease-out(减速)/ease-in-out(先加速后减速)/cubic-bezier(x1,y1,x2,y2)贝塞尔曲线
e、steps：实现一个关键逐帧动画功能
2、transform属性向元素应用2D,3D效果，该属性允许我们对元素进行旋转，缩放，移动和倾斜
a、translate()根据x轴和y轴位置给定的参数，从当前位置移动 transform:translate(-150px -150px);
b、rotate()根据给定度数顺时针旋转，负值是允许，这样会逆时针旋转
c、scale 默认为（1,1），进行图片缩放，给负值时，会先旋转再缩放
d、skew 倾斜
f、transform-origin：改变元素基点位置，当有3个参数时，第三个参数只能是数字+单位，不能用left/center/right
3、3D涉及到的属性
a、transfrom-style：指定嵌套元素如何在3D空间中呈现（加在父元素上）
transform-style：flat(表示所有子元素在2D*面呈现)/perserve-3d(表示所有子元素在3D*面呈现);
b、perspective:none/<length>;perspective取值为none或不设置，没有真3D空间；perspective取值越小，3D效果越明显；
c、perspective-origin:决定看东西的角度
d、backface-visibility:visible/hidden;决定背面是否可见
4、animation和@ikeyframes一起用，支持animation动画的只有webkit内核
a、animation-property:需要过渡的样式
b、animation-duration：运动时间
c、animation-delay：延迟时间