css3径向渐变

css3渐变
创建渐变效果，至少需要两种颜色的定义，才能呈现出过渡的渐变效果，渐变分为线性渐变和径向渐变。径向渐变，则是指由有一个点向四周扩散式渐变。

径向渐变

径向渐变指的是由一个点向四周扩散式渐变。径向渐变可以指定渐变的中心点、形状、大小。
语法：
background-image:radial-gradient(大小/形状 at 方位 ，颜色1，颜色2…)；

1. 中心点
   默认中心点是元素的正中心点的位置，如果需要修改中心点，可以在 at 介词之后添加直角坐标系的（x，y）相应的值，数值单位可以是px，也可以是%。
   例：background-image: radial-gradient(rgb(183, 144, 235) 50%,pink 90%);
   表示以紫色为中心点，在元素50%处，由紫色到粉色，开始径向渐变到90%处。
   

2. 形状
   默认的形状是椭圆形ellipse，但是在正方形的元素中，也会以圆形显示；另外还可以指定，元素中径向渐变的形状为圆形circle。

3. 大小
   渐变的大小，即渐变到哪个位置停止。例如，最近边则是表示径向渐变至最近的边之后，就停止渐变效果显示。
   具体有以下四个值：
   最近边：closest-side       最远边：farthest-side
   最近角：closest-corner      最远角：farthest-corner
   例如：background-image: radial-gradient(closest-side at 500px 200px ,rgb(91, 211, 131),pink );
   表示中心点变成（500px，200px）处，径向渐变到最近边停止渐变效果，以最后的颜色填充整个元素
   

4. 重复
   径向渐变与线性渐变，都可以使用重复渐变的属性。
   例如：background-image: repeating-radial-gradient(circle at 500px 200px ,rgb(91, 211, 131) 0%,pink 10%);
   表示以圆形显示，中心点在（500px，200px），开始径向重复渐变，直至填充整个元素。
   
   这里需要注意一点：
   径向渐变属性值中，形状和大小不能同时使用，否则无法显示效果。