径向渐变基本属性
在MDN中关于radial-gradient的介绍，大意为可以创建一个由原点辐射开的渐变。
首先，先写一段html代码，做个简单的示例。
<div class="radial"></div>
写一个由基本颜色组成的径向渐变，由七种颜色组成的彩虹色。
.radial {
width: 400px;
height: 100px;
background: radial-gradient(#FF0000, #FFA500,#FFFF00, #00FF00, #007F00, #0000FF, #8B00FF)
}
可以看到，径向渐变默认是以原点开始的由内向外辐射的渐变。当没有指定渐变类型和位置的情况下，径向渐变是根据容器的宽高尺寸决定的。
本案例中宽高比是4:1 ,径向渐变的椭圆形状也是4:1，渐变的颜色也终止在容器边缘。
当然，椭圆也可以设置宽高,改变椭圆宽高比。直接指定椭圆宽高值即可（图二）。
.radial {
background: radial-gradient(ellipse 20px 40px,#FF0000, #FFA500,#FFFF00, #00FF00, #007F00, #0000FF, #8B00FF)
}
径向渐变的形状
可以通过shape来指定渐变的形状。可选值有：圆形(circle)、椭圆(ellipse)。默认为椭圆形。
修改渐变样式，增加指定形状：
.radial{
background: radial-gradient(circle, #FF0000, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF)
}
结果会是一个以圆形辐射的渐变，下面是默认椭圆形和circle的对比图：
可以看到渐变已经变成由原点开始，以圆形向外渐变。
渐变中心点
默认情况下，渐变的原点是中心点。当然也可以通过position来设置相关中心点。
还是在上面的例子上做修改，这次指定左上角(0,0)为原点。
.radial-3 {
background: radial-gradient(at 0 0,#FF0000, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF)
}
效果图如下，可以看到当给径向渐变指定了原点之后，会以指定的(0, 0)开始椭圆形渐变。
边缘轮廓的具体位置
extend-keyword关键字用来描述边缘轮廓的位置。关键字有以下四种常量：
| 常量 | 说明 |
|---|---|
| closest-side | 渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。 |
| closest-corner | 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。 |
| farthest-side | 与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。 |
| farthest-corner | 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。 |
closest-side
设置径向渐变的边缘轮廓为closest-side。此时，渐变的边缘形状将于容器距渐变中心最近的一边，即宽边相切：
.radial-1 {
background: radial-gradient(closest-side, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF)
}
再增加圆形的径向渐变的边缘轮廓对比：
radial-2 {
background: radial-gradient(circle closest-side, #FF0000, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF)
}
下面是对比展示图。可以看到当设置closest-size时，椭圆的渐变(左图)会与距中心点最近的边(宽)相切；圆形的渐变（右图）也与距中心点最近的点(宽)相切。
closest-corner
closest-corner的渐变边缘将于容器距中心点最近的一个角相交。
.radial-1 {
background: radial-gradient(closest-corner, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF)
}
.radial-2 {
background: radial-gradient(circle closest-corner, #FF0000, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF)
}
下面是效果图。因为中心点在容器中心，所以容器距离中心点的四角是一样距离的。椭圆形（左图）最边缘的紫色渐变与四角相交；圆形（右图）最边缘的紫色渐变也与四角相交。
farthest-side
设置farthest-side常量，与closest-side恰好相反，它的渐变边缘是与容器距离渐变中心点最远的边(高)相切。
这里增加原点在左上角的对比(0,0)椭圆对比（radial-3），以及原点在左上角的圆形对比(radial-4)。
.radial-1 {
background: radial-gradient(farthest-side, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF);
}
.radial-2 {
background: radial-gradient(circle farthest-side, #FF0000, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF);
}
.radial-3 {
background: radial-gradient(farthest-side at 0 0, #FF0000, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF);
}
.radial-4 {
background: radial-gradient(circle farthest-side at 0 0, #FF0000, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF);
}
四种情况的效果如下图，可以发现这四种情况的最边缘紫色渐变，会与容器距中心点最远的边(右高边)相切。
- 椭圆形容器中心点（图一）
- 圆形容器中心点(图二)
- 椭圆左上角中心点（图三）
- 圆形左上角中心点（图四）
farthest-corner
farthest-corner指定的边缘渐变，会与容器距中心点最远的边相交。
同样以四种情况作对比，排序同上。
.radial-1 {
background: radial-gradient(farthest-corner, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF);
}
.radial-2 {
background: radial-gradient(circle farthest-corner, #FF0000, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF);
}
.radial-3 {
background: radial-gradient(farthest-corner at 0 0, #FF0000, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF);
}
.radial-4 {
background: radial-gradient(circle farthest-corner at 0 0, #FF0000, #FFA500, #FFFF00, #00FF00, #007F00, #0000FF, #8B00FF);
}
最终效果如下图，图一~图四的排序同上。
可以看到这四种情况下，最边缘的紫色渐变都与右高边相交。
渐变大小
默认情况下，径向渐变是根据指定的渐变色均匀分布的。可以通过百分比或者具体像素值来设置渐变的色值范围。
这里设置红、黄、蓝三种渐变色，对渐变大小作说明。
.radial-1 {
width: 200px;
height: 200px;
background: radial-gradient(red, yellow, blue)
}
可以发现，在不指定渐变大小的时候，渐变范围是等分的。这里的渐变范围，既不是指容器高度，也不是指容器宽，而是最远的边角线作为半径做圆的范围，才叫做渐变范围。
如果肉眼无法确定是否是等距分布，可以通过设置渐变范围来确定。
.radial-2 {
background: radial-gradient(red, yellow 50%, blue)
}
效果图如下图二。可以发现两者是渐变大小是一致的。
我们现在通过设置不同的参数，改变色彩的渐变范围。这里设置红、蓝两种对比色。
.radial-3 {
background: radial-gradient(red 20%, blue )
}
.radial-4 {
background: radial-gradient(red 40%, blue 80%)
}
效果如下图：
这里要特别说明色值后面的范围参数的意思。
- (图三)中红色的纯色占据了20%，剩下的80%(100%-20%)由红色和蓝色的渐变色等分；
- (图四)中红色的纯色占据了40%，蓝色的纯色占据了20%(100%-80%)，剩下的40%(80%-40%)由红色和蓝色的渐变色等分，这里两种纯色各自占据了40%和20%，这两个过渡点之间，就是渐变色了。
现在可以想一想，如果过渡点相同会出现什么情况？
.radial-1 {
background: radial-gradient(red 50%, blue 50%);
}
结果如下(图一)所示。正常直接是两个纯色各自占据50%。但是红色边缘有锯齿，不太圆滑。这是因为颜色直接0过渡会出现偏差，可以借助1像素或者半像素进行过渡缓冲。
增加1px的过渡缓冲，结果如（图二）所示。
.radial-2 {
background: radial-gradient(red 50%, blue 51%);
}
可以看到，增加了1px的缓冲，红色变得较为圆润了。
demo实例
学习了以上径向渐变的知识，我们可以简单地制作一个音乐播放盘。
radial-gradient方法不允许循环渐变。如需要循环渐变，可以使用repeating-radial-gradient方法。它类似于radial-gradient并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。
.radial {
width: 250px;
height: 250px;
border-radius: 50%;
background: radial-gradient(circle, #fff 6px, #a3daff 7px, #a3daff 50px, #252c41 51px, #252c41 66px, #343838 67px);
}
