css径向渐变

CSS radial-gradient() 函数创建一个，用来展示由原点（渐变中心）辐射开的颜色渐变。

• 默认均匀分布

#test{
				width: 200px;
				height: 300px;
				background-image: radial-gradient(red,blue);
			}

• 不均匀分布：
  radial-gradnent(circle,red,blue)
  改变渐变的形状：
  circle
  ellipse(默认为椭圆)

#test{
				width: 200px;
				height: 300px;
				background-image: radial-gradient(circle,red,blue);
			}

• 描述边缘轮廓的具体位置：
  radial-grandient(closest-corner circle,red,blue)
  closest-side 最近边
  渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）
  farthest-side 最远边
  与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
  closest-corner 最近角
  渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
  farthest-corner 最远角
  渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

#test{
				width: 200px;
				height: 300px;
				background-image: radial-gradient(closest-side circle,red,blue 50%);/*渐变边缘距离最近一边是中心点距离最近一边的的50%*/
			}
			#test1{
				margin-top: 10px;
				width: 200px;
				height: 300px;
				background-image: radial-gradient(farthest-side circle,red,blue 50%);/*渐变边缘距离最远一边是中心点距离最远一边的的50%*/
			}

#test2{
				margin-top: 10px;
				width: 200px;
				height: 300px;
				background-image: radial-gradient(closest-corner circle,red,blue 50%);
			}
			#test3{
				margin-top: 10px;
				width: 200px;
				height: 300px;
				background-image: radial-gradient(farthest-corner circle,red,blue 50%);
			}
			

改变中心点：

#test2{
				margin-top: 10px;
				width: 200px;
				height: 300px;
				background-image: radial-gradient(closest-corner circle at 50px 50px,red,blue 50%);/*中心点位置在50px 50px*/
			}
			#test3{
				margin-top: 10px;
				width: 200px;
				height: 300px;
				background-image: radial-gradient(farthest-corner circle at 50px 50px,red,blue 50%);
			}