渐变+过渡

1.浏览器前缀 很多css属性，最初的六篮板没有形成最终的正式版，但浏览器为了对这些新属性形成支持，主流浏览器提供属于自己的语法规则“浏览器前缀”
-webkit- 谷歌、苹果浏览器前缀
-moz- 火狐浏览器前缀
-ms- IE浏览器前缀
-o- 欧鹏浏览器前缀
添加浏览器前缀：兼容模式
不添加浏览器前缀：标准模式
2.渐变 背景色在多个颜色之间平稳的过渡
线性渐变：从一个方向到另一个方向的颜色的变化。
标准模式的语法：background:linear-gradient(direction,color-stop1,color-stop2,…)
direction:默认为to bottom,即从上向下的渐变
stop：颜色的分布位置，默认均匀分布。
兼容模式语法：background:linear-gradient(direction,color-stop1,color-stop2,…)
direction：不能添加to 默认指的是从那个方向开始
渐变方向：（1）.to left\to right\to top
（2）.对角渐变 to left top\ to right bottom
（3）.渐变角度的变化 eg:标准模式：40deg 40度
兼容模式：50deg
线性渐变颜色的分布： linear-gradient(方向，颜色1 20%，颜色2 30%,…)
到20%这个位置仍然是颜色1，出了20%开始向颜色2渐变
径向渐变：从一个点到四周颜色的过渡变化 语法（必须家浏览器前缀）：background:radial-gradient(center,shape,size,start-color,…last-color);
center:渐变起点的位置，可以为百分比，默认是图形的正中心
shape:渐变的形状， ellipse表示椭圆形，circle表示圆形，默认为ellipse。若元素形状为正方形，则ellipse和circle显示一样
size:渐变的大小，即渐变到哪里停止，有四个值。closest-side:最近边；farthest-side：最远边；closest-corner:最近角；farthest-corner:最远角
3.重复性渐变：重复性线性渐变：background:repeating-linear-gradient();
重复性径向渐变：background:repeating-radial-gradient();
4.过渡：a.transition-property:检索或设置对象中的参与过渡的属性
b.transition-duration:检索或设置对象过渡的持续时间
c.transition-delay:检索或设置对象中过渡的都规划类型
默认的不是匀速，默认的是ease
简写属性：transition:过渡的属性 过渡的时间 延迟时间 动画的类型 （linear 匀速）
Transition必须通过事件触发，鼠标滑过改变css属性值