CSS的渐变属性

1、何谓渐变？
让背景色在多个颜色中平稳过渡。
所谓平稳，类似于左图这样

谁要跟你说右图是渐变，你可以拿出你鼠标垫下39米长的大刀让他先跑40米… …

2、渐变介绍

线性渐变----->linear-gradient()
语法：
background: linear-gradient(direction, color-stop1, color-stop2, …);
它其实是个功能函数，包含多个参数；
direction：控制渐变的方向、默认是to bottom 到下，即从上到下；
例：
background: linear-gradient(to right,red,yellow);
红到黄向右渐变，结果：

background: linear-gradient(to top,red,yellow);
红到黄向上渐变

值得一提的是在兼容模式下，渐变的方向是相反的，或者说direction的意义不同，兼容模式下的direction 意指从哪个方向开始渐变
对比举例：background: -webkit-linear-gradient(top,red 50%,yellow 50%);

除了方向外还可以使用角度–>deg(默认从左到右为90deg，从上到下渐变为deg180)
举例：

径向渐变：background: radial-gradient()
从一个点到四周的颜色的过渡变化。
语法：（必须加浏览器前缀）
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：最远角。
例：background: -webkit-radial-gradient(red,yellow,green);
默认渐变点在中心，往四周呈椭圆形渐变：

改变渐变形状shape，这里改成circle圆形效果：
background: -webkit-radial-gradient(circle,red,yellow,green);

改变渐变点的位置： 距离左侧40px 顶部150px
background: -webkit-radial-gradient(40px 150px,red,yellow,green);

改变渐变大小，这里渐变到最远边为止
直到距离这个点最远边（这里为右侧）为绿色为止