CSS radial-gradient径向渐变

回顾前面讲的linear-gradient线性渐变，它控制的是背景容器直线平面的渐变，而这里的radial-gradient径向渐变控制的是背景容器曲线平面的渐变，它和linear-gradient的语法相似。

radial-gradient

语法：

radial-gradient(
  [
    [ circle  || <length>]  [at <position>]? , |
    [ ellipse  || <length> [<length>|<percentage>]{2}]  [ at  <position>]? , |
    [ [ circle | ellipse ]  || <extent-keyword>]   [ at <position> ]? , |
    at  <position>;,
  ]?
  <color-stop> [,<color-stop>]+
)

语法定义来源于https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient

---

简易通俗的讲，上述的语法我可以这样来表达：

radial-gradient(
    <shape>,
    <range>,
    <position>,
    <color-stop>
)

其中
<shape>：渐变形状；
<range>：渐变范围；
<position>：渐变中心点；
<color-stop>：渐变颜色分布

---

下面我们来逐个击破

---

渐变形状<shape>

渐变形状是用来声明渐变形状的。
在径向渐变中，可以定义两种类型的渐变形状，分别是关键字circle和ellipse，从英文的意思上就能知道，circle是定义圆形渐变，ellipse是定义椭圆形渐变

---

渐变范围<range>

渐变范围是用来声明渐变大小的。
对于不同类型的径向渐变，它们的渐变范围定义是有一些区别的。

• 当渐变类型是circle时，只要声明一个值就可以，而且这个值是<length>类型的，而不能是<percent>百分比类型的。比如px、ch、rem、em这些有具体大小的值
• 当渐变类型是ellipse时，需要声明两个值，他可以是<length>类型的值，亦可以是<percent>类型的值，它们分别表示x轴（横向）方向的范围和y轴（纵轴）方向的范围。

---

为什么circle的范围只是一个值约束，而ellipse的范围要有两个值约束呢？

这很好理解，因为圆形的曲线上的点到渐变中心点的距离都是一样的（半径），所以只需要一个值就可以知道渐变的横向和纵向范围。而ellipse是椭圆，其曲线上的各个点到中心点的距离是有某种联系的,但它们的值是不一样的，所以需要明确声明横向和纵向的范围。

---

关于渐变范围，我们可以把它意淫成一块方形区域.

background-image：radial-gradient(circle 200px,red,green);
background-image：radial-gradient(ellipse 400px 200px,red,green);

它们的渐变区域是这样子的：

---

从上图中可以看出circle类型的渐变范围是正圆的，而ellipse类型的渐变一般是椭圆的，当然它也可以是正圆的，当定义渐变范围的值相等时，它就是正方形的，这是他相当于是circle渐变。
比如：

background-image：radial-gradient(ellipse 200px 200px,red,green);

---

我的理解：

渐变范围是相对于渐变中心点的区域描绘，你可以幻想它是绘制经过渐变中心点垂直和水平线所分割的1/4区域，然后利用环绕中心点旋转90deg，180deg，270deg来绘制完整的渐变。也就是说这里的渐变范围声明的值是用于绘制渐变区域中心点垂直或水平线一侧的，而非整个渐变区域。

比如：

background-image：radial-gradient(circle 200px,red,green);
background-image：radial-gradient(ellipse 400px 200px,red,green);

---

渐变范围中的是具体的值，而<percent>呢？它是相对于谁的百分比呢？

它是相对于背景容器的百分比。

比如，我有一个800px*800px的背景容器，该背景容器的CSS样式为

background-image：radial-gradient(ellipse 50% 25%,red,green);

就相当于

background-image：radial-gradient(ellipse 400px 200px,red,green);

---

另外，也可以用关键字特殊值：closest-side 、closest-corner、 farthest-side、farthest-corner

closest-side:渐变范围为从中心点到最近边的距离
closest-corner:渐变范围为从中心点到最近角的距离
farthest-side:渐变范围为从中心点到最远边的距离
farthest-corner:渐变范围为从中心点到最远角的距离

比如：

background-image：radial-gradient(circle closest-side at 50px 50px, red,green);
background-image：radial-gradient(circle closest-corner at 50px 50pxr, red,green);
background-image：radial-gradient(circle farthest-side at 50px 50px, red,green);
background-image：radial-gradient(circle farthest-corner at 50px 50px, red,green);

---

渐变中心点<position>

渐变中心点是用来定位渐变的位置的。

径向渐变是围绕渐变中心点来进行曲线渐变的。渐变中心点的声明和background-position定义相似，分别声明X轴（横向）和Y轴（纵向）位置，在这里它的声明要加关键字at
比如：

background-image：radial-gradient(ellipse 400px 200px at 400px 400px,red,green);

---

和其他定义位置的CSS background-position属性定义位置相似，它的值也分为<length>和<percent>两种。其中<length>值是中心点相对于背景容器左上顶点的具体距离，<percent>值是中心点相对于背景容器区域宽高的百分比距离。
如下两张图片是图一个效果：

---

另外也可以用关键字left（0%）、right（100%）、top（0%）、bottom（100%）和center（50%）。

比如：

background-image：radial-gradient(ellipse 400px 200px at 50% 50%,red,green);
background-image：radial-gradient(ellipse 400px 200px at center center,red,green);

如果是缺省值，则默认是center

background-image：radial-gradient(ellipse 400px 200px at 40px,red,green);
background-image：radial-gradient(ellipse 400px 200px at 40%,red,green);
background-image：radial-gradient(ellipse 400px 200px at top,red,green);

相当于

background-image：radial-gradient(ellipse 400px 200px at 40px center,red,green);
background-image：radial-gradient(ellipse 400px 200px at 40% center,red,green);
background-image：radial-gradient(ellipse 400px 200px at top center,red,green);

---

颜色分布<color-stop>

radial-gradient渐变中的颜色分布和linear-gradient渐变的相似，也可以设定多个渐变颜色点，不同的是颜色中设置的<length>是距离渐变中心点一定值的点集合（连在一起就是一条曲线），而颜色中设置的<percent>是渐变范围线距离渐变中心点百分比的点集合。

比如：

background-image:radial-gradient(circle,red 50px,green 100px);
background-image:radial-gradient(circle,red 50%,green 50%);

---

还记得radial-gradient渐变中可以设置渐变范围么?

background-image：radial-gradient(circle 400px,red,green);

假如渐变范围是400px*400px，这时我要是设置颜色分布的<length>，

(1)如果length大于400px则渐变范围就不会起作用，换句话说，就会以length的实际值为准来规定渐变范围。
比如：

background-image：radial-gradient(circle 400px,red 200px,green 500px);

渐变的范围不是400px而是500px。

(2)如果是ellipse，则<length>是表示的是距离渐变中心点的横向距离。

(3)如果设置颜色分布用的是<percent>，则该百分比是相对渐变范围的。

比如：

background-image：radial-gradient(circle 400px,red 20%,green 50%);

就相当于：

background-image：radial-gradient(circle 400px,red 80px,green 200px);

(4)如果是ellipse，则百分比是横向和纵向的百分比。

比如：

background-image：radial-gradient(ellipse 400px 800px,red 40%,green 80%);

相当于

background-image：radial-gradient(ellipse 400px 800px,red 160px,green 320px);

---

repeating-radial-gradient

repeating-radial-gradient和radial-gradient的语法相同，不同的是它是在背景容器所设置的background-size大小的范围内循环渐变。

比如：

repeating-radial-gradient(circle,red 10px,blue,15px,yellow,20px);

表示循环生成red,blue,yellow颜色分布的渐变，它们之间的距离会循环累加。

相当于：

radial-gradient(circle,red 10px,blue,15px,yellow,20px,red 30px,blue 35px,yellow,40，red 50px,blue 55px,yellow,60......);

---

如果设置了background-size值，那么repeating-radial-gradient循环的是范围是在背景容器background-size所设置的大小范围内。如果没有设置background-size值，则循环的范围是整个背景容器。

最后我想说一点：对于circle我只要知道距离中心点（圆心）的横向距离就可以画出唯一一个同心圆，对于ellipse我需要知道距离中心点（椭圆的中心点）的横向和纵向距离可以画出唯一一个同心同形椭圆。这就是radial-gradient画渐变的依据。

---

该文章是本人阅读书籍以及其他人的博客所写，其中的一些信息和图片是加入了本人的理解，如若有误，请纠正，非常感谢