由中心向四周渐变（径向渐变）

最近在项目中遇到一个问题：一个圆想要由中间向四周进行渐变 之前的 linear-gradient（线性渐变）满足不了需求了  这时候就需要用到 radial-gradient（径向渐变）

下面来介绍一下这两个渐变的使用吧：

一、linear-gradient 是从四面八方的某一个方向 朝着另外一个方向逐渐变化的

background: linear-gradient(direction, color1, color2, ...);

color的颜色可以是多个自由搭配（一般两到三个）

direction主要有：

to  bottom	从上到下（也是不填的默认值）
to  Top	从下到上
to right	从左到右
to bottom right	从左上到右下
to top right	从左下到右上
to left	从右到左
to top left	从右下到左上
to bottom left	从右上到左下

direction还可以用角度表示（正的负的都可以,随意调整）

eg: linear-gradient(30deg, blue, red,green,yellow);

二、radial-gradient 是从中间向四面八方散开的

background:radial-gradient(shape size at position, start-color, ..., last-color)

shape(确定圆的类型)：

ellipse	椭圆（也是默认值）
circle	圆形

background:radial-gradient(shape farthest-corner at center,red, yellow, green)

size(定义渐变的大小)：

farthest-corner (默认)	指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side	指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner	指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side	指定径向渐变的半径长度为从圆心到离圆心最远的边

background:radial-gradient( circle size at center,red, yellow, green)

按照以上顺序的结果图如下：

position(定义渐变的位置)常见值：

center（默认）	设置中间为径向渐变圆心的纵坐标值
top	设置顶部为径向渐变圆心的纵坐标值
bottom	设置底部为径向渐变圆心的纵坐标值

background:radial-gradient( circle farthest-corner at position,red, yellow, green)

除此之外还有很多以百分比的形式表示的：

background:radial-gradient(red 10%, yellow 30%, green 50%)

background:radial-gradient(red 5%, yellow 25%, green 50%)

background:radial-gradient(closest-side at 30% 55%,red, yellow, green)

background:radial-gradient(closest-side at 50% 75%,red, yellow, green)

background:radial-gradient(farthest-side at 30%  55%,red, yellow, green)

background:radial-gradient(farthest-side at 50%  75%,red, yellow, green)