浅谈径向渐变（radial-gradient）

哈喽，小伙伴们，上期我们稍微简单的讨论了一下线性渐变。若是没看的话，此处附上那篇博客地址：

浅谈 线性渐变（linear-gradient）_m0_57965131的博客-CSDN博客

---

好了，正文开始，本文也简单的介绍一下径向渐变

线性渐变能实现特别棒的效果，不过有时你可能想要圆形渐变，比如说实现聚光灯、圆形阴影、圆形发光等效果。径向渐变的句法与线性渐变类似，不过也有一些区别，下面给大家看一个简单的径向渐变效果：

是不是看起来很酷，径向和线性很相似，其中的颜色也可以用多种，我给大家展示一下多种颜色混合到一起的径向渐变：

 可以看出来第二个盒子是不是更炫了，肯定的、

在这里，怕大家忘了什么是线性渐变，我给大家做个比较：

 

在这里， 径向渐变看起来就像是从中心到四周扩散，像一个个小圆圈汇总到一起，那是因为我这一个盒子是一个正方形，所以看起来像是一个个圆圈，但若是我换成一个长方形呢，看下图：

此时，是不是就成为一个椭圆了，不过依然还是从中心到四周发散。

 这几种情况都没有声明位置，因此使用默认的 center。此外，由于没有声明形状，除方形元素之外都是椭圆形。径向渐变只有两种可用的形状值（因此也就只能有两种形状)，即 circle（圆）和ellipse（椭圆）。径向渐变的形状可以显式声明，也可以由渐变图像的尺寸推导出来。

注意，渐变的形状与所在图像的尺寸和形状没有任何关系。如果创建的是圆形渐变，得到就是一个圆，即便在矩形渐变图像中也是如此。同样，椭圆渐变得到的始终是椭圆形，即便在方形渐变图像中也是如此（不过看起来像是圆形，因为椭圆的宽度和高度相等）。

尺寸也可以使用百分数值，不过只能用于设定椭圆形。圆形不能用百分数指定尺寸，因为无法确定百分数相对哪一轴计算（比如对高100像素、宽500像素的图像来说，10%相当于10像素还是50像素呢)。如果试图为圆形渐变设置百分数值,整个声明都将失效。为椭圆渐变设置百分数值时，跟之前一样，第一个值相对横轴计算，第二个值相对纵轴计算。

对了，长度值和百分数值不是设定径向渐变尺寸的唯一方式。除此之外，还可以使用四个关键字

 这个图摘自《css权威指南》，我知道大家很不喜欢看文字，那我就在这里就这四个值分别做个示范，如下图所示：

可以看出来1和2并没有什么区别，3和4也没有区别（虽然我也不知道为什么）

不过，给大家附上书中的样式，给大家参考一下：

 其实，径向渐变和线性渐变差不多，也可以使用百分数，如图所示：

 

 

---

本期就到这里了，本人对径向渐变的理解只能到这了，太过深入的我怕我说错，误导你们。

-webkit-这个依然是私有前缀哈，本文依然不考虑IE浏览器哈。

若是有错，依然请大家指正。