技术部分(关于c3渐变原理的总结)：

径向渐变（radial-gradient）：

渐变中心点：

1：渐变颜色从渐变中心点向外辐射

2：通过position来设置在盒子里的中心点（语法：at x y）

边缘形状轮廓：

1：结束形状，径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定

2：每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定

3：取值为circle（圆形），ellipse（默认值：椭圆形）（语法：shape at position）

色值结束点：

1：用于设定虚拟渐变射线的变化方式，由中心点水平变化至右侧。色值结束点由百分比设定时，则是相对于终点为渐变射线与边缘形状相交点的渐变半径，渐变半径的终点位置即为100%。该值越小，渐变半径越小，比如说设定为20%，渐变半径就是中心点相对于终点的半径只有20%为有渐变效果（色值起始点-色值结束点），剩下的80%填充色都为色值结束点的颜色

虚拟渐变射线：

1：色值结束点用于设定虚拟渐变射线的变化方式，由中心点水平变化至右侧

2：渐变射线由点组成，每个点都对应不同的色值，而该色值决定了渐变线与每个轮廓的横切点对应色值的轮廓颜色

图解：

线性渐变（linear-gradient）：

渐变线：

1：由包含渐变图形的中心点和一个角度来定义

2：渐变线上的颜色值由不同的点定义（包括起始点，终点以及两者之间的可选的中间点，可以有多个中间点）

3：其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色

起始点：

1：是渐变线上代表颜色起始值的点

2：由渐变线和过容器最近顶点的垂直线的交叉点定义起始点

终点：

1：是渐变线上代表最终颜色值的点

2：由渐变线和过容器最近的顶点的垂直线的交叉点定义起始点（起始点的对称点）

着色线：

1：linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点

图解：

线性渐变图示

渐变方向

技术部分(关于c3渐变原理的总结)：

径向渐变（radial-gradient）：

渐变中心点：

1：渐变颜色从渐变中心点向外辐射

2：通过position来设置在盒子里的中心点（语法：at x y）

边缘形状轮廓：

1：结束形状，径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定

2：每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定

3：取值为circle（圆形），ellipse（默认值：椭圆形）（语法：shape at position）

色值结束点：

1：用于设定虚拟渐变射线的变化方式，由中心点水平变化至右侧。色值结束点由百分比设定时，则是相对于终点为渐变射线与边缘形状相交点的渐变半径，渐变半径的终点位置即为100%。该值越小，渐变半径越小，比如说设定为20%，渐变半径就是中心点相对于终点的半径只有20%为有渐变效果（色值起始点-色值结束点），剩下的80%填充色都为色值结束点的颜色

虚拟渐变射线：

1：色值结束点用于设定虚拟渐变射线的变化方式，由中心点水平变化至右侧

2：渐变射线由点组成，每个点都对应不同的色值，而该色值决定了渐变线与每个轮廓的横切点对应色值的轮廓颜色

图解：

线性渐变（linear-gradient）：

渐变线：

1：由包含渐变图形的中心点和一个角度来定义

2：渐变线上的颜色值由不同的点定义（包括起始点，终点以及两者之间的可选的中间点，可以有多个中间点）

3：其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色

起始点：

1：是渐变线上代表颜色起始值的点

2：由渐变线和过容器最近顶点的垂直线的交叉点定义起始点

终点：

1：是渐变线上代表最终颜色值的点

2：由渐变线和过容器最近的顶点的垂直线的交叉点定义起始点（起始点的对称点）

着色线：

1：linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点

图解：

线性渐变图示

渐变方向