哈喽,小伙伴们,上期我们稍微简单的讨论了一下线性渐变。若是没看的话,此处附上那篇博客地址:
浅谈 线性渐变(linear-gradient)_m0_57965131的博客-CSDN博客
好了,正文开始,本文也简单的介绍一下径向渐变
线性渐变能实现特别棒的效果,不过有时你可能想要圆形渐变,比如说实现聚光灯、圆形阴影、圆形发光等效果。径向渐变的句法与线性渐变类似,不过也有一些区别,下面给大家看一个简单的径向渐变效果:
是不是看起来很酷,径向和线性很相似,其中的颜色也可以用多种,我给大家展示一下多种颜色混合到一起的径向渐变:
可以看出来第二个盒子是不是更炫了,肯定的、
在这里,怕大家忘了什么是线性渐变,我给大家做个比较:
在这里, 径向渐变看起来就像是从中心到四周扩散,像一个个小圆圈汇总到一起,那是因为我这一个盒子是一个正方形,所以看起来像是一个个圆圈,但若是我换成一个长方形呢,看下图:
此时,是不是就成为一个椭圆了,不过依然还是从中心到四周发散。
这几种情况都没有声明位置,因此使用默认的 center。此外,由于没有声明形状,除方形元素之外都是椭圆形。径向渐变只有两种可用的形状值(因此也就只能有两种形状),即 circle(圆)和ellipse(椭圆)。径向渐变的形状可以显式声明,也可以由渐变图像的尺寸推导出来。
注意,渐变的形状与所在图像的尺寸和形状没有任何关系。如果创建的是圆形渐变,得到就是一个圆,即便在矩形渐变图像中也是如此。同样,椭圆渐变得到的始终是椭圆形,即便在方形渐变图像中也是如此(不过看起来像是圆形,因为椭圆的宽度和高度相等)。
尺寸也可以使用百分数值,不过只能用于设定椭圆形。圆形不能用百分数指定尺寸,因为无法确定百分数相对哪一轴计算(比如对高100像素、宽500像素的图像来说,10%相当于10像素还是50像素呢)。如果试图为圆形渐变设置百分数值,整个声明都将失效。为椭圆渐变设置百分数值时,跟之前一样,第一个值相对横轴计算,第二个值相对纵轴计算。
对了,长度值和百分数值不是设定径向渐变尺寸的唯一方式。除此之外,还可以使用四个关键字
这个图摘自《css权威指南》,我知道大家很不喜欢看文字,那我就在这里就这四个值分别做个示范,如下图所示:
可以看出来1和2并没有什么区别,3和4也没有区别(虽然我也不知道为什么)
不过,给大家附上书中的样式,给大家参考一下:
其实,径向渐变和线性渐变差不多,也可以使用百分数,如图所示:
本期就到这里了,本人对径向渐变的理解只能到这了,太过深入的我怕我说错,误导你们。
-webkit-这个依然是私有前缀哈,本文依然不考虑IE浏览器哈。
若是有错,依然请大家指正。