26.尚硅谷_css3_径向渐变.wmv原创

在讲什么线性渐变，是不是他其实还有渐变类型，叫做镜像渐变，就是圆。我们来看看好。好，刚刚我们这边渐变其实一直在讲线性渐变吧，好CTRLC，我这过来好讲个什么镜像渐变，OK。镜像渐变是不是这个镜是吧，镜像渐变吧，好，它的函数是什么？OK，原理是就这个函数CTRLC直接给它拎过来，好把它换一换就可以了，来看它有什么不一样的地方，来看这个渐变是不是用来创建一个什么，你们解答用来展示有原点，原点就是一个渐变中心嘛，辐射它来这个什嘛，颜色的渐变码默认是均匀丰富的，比我们来看一下是不干嘛，从红这个嘛，从红到黄的吧，是吧，好，从红到黄的。

走，你看他是怎么玩的。你看默认是个什么哦。默认这个红的是个什么圆，椭圆吧，对不讲，我把这个稍微变好看一点，三百三百这个时候应该就是个圆了，是他默认应该是个椭圆，是不是，是不是我们从黄道绿。从黄到绿就比较好看一点。哎，很明显是从黄色开始慢慢的吗。发散出去了吧，是吧，那当然它也是可以多值的pink。是不是出来了，能理解，你看黄道绿的绿到粉的一个界面吗？能不解？OK，那看它还有些什么东西，OK，默认是均匀分布的吧，是不是啊，OK，他是怎么均匀的？怎么进了哪个。

默认是按照这个分布。等等，OK，你看这个是不是正好是一半底毛。是吧，这里面现在有几种渐变两种黄道绿遇到粉的嘛，正好是平分嘛，你们讲你也可以指定吧。咋子点，比如说这个一给个分。这个给个30%，这个给个70%，这代表什么鬼啊。10%应该是个颜色，圆的一个纯的什么黄颜色是不是OK，你说百分之里十里面都是一个纯的黄颜色，从10%开始，应该是从黄道绿的一个界面是吧，差不多从哪边开始圈开始往外是吧，到这个圈对讲，然后呢，百分之到百分之是啊。黄到绿的分到这个粉色应该是什么？绿到粉的这里面有几个纯色，两个黄色跟粉色，是不是这个从这边开始。

哇。这是干嘛闪屏吗？好来看一下，从这个粉色到这一块应该都是渐变色，这能不能理解？OK，好来看一下，其实它跟线性渐变还是有些不一样的，讲到现在是不是跟线性地变差不多啊？OK，我们说默认它其实应该是一个椭圆。默认是一个椭圆，是不是OK，它可以指定让它变成一个圆，怎么指定？你看改变界面的形状吧，你前面加个什么圆来看一下，好，比如说我让你是一个圆走你。好看它就要变这个圆了，这怎么理解啊，而且我们刚刚说它的分是按照按照什么分的这条线来分的吧，这能么理解啊，OK，来看一下它，还有它还有些什么字。改变，你看改变形渐变形状的大小吧，默认是干嘛？默认是最最近最最远的那个角吧。

是不是默认值是最远的那个角啊，不对劲啊，看下这个默认值位段，好，我上面没有写默认值是不是好看这个默认值位段。去哪看MDN吧，是不是OKMDN这里看一下这个位置为多少。这是SVG的吧，应该要找他吧，是吧，好看一下。中文截停来看一下默认值，去哪找默认值？这个吧，是不是有没有认知。好像没有说默认是看一下。默认是中心点是吧？默认形状是个椭圆渐变的尺寸吧，是吧？包含下面这个列表吧，是吧？看一下这个默认这位道。

能不能找到，有没有认识的？好像真还没有妹子。来看一下渐变尺寸的大小，是不是在这边啊？你没有看到有默认值啊，没看到默认值吧，那我们来测一下它的默认值到底是多少啊，这个也是API上没有给好，反正我们知道这个啊。里面有四个参数吧，你看第一个参数这个啊，默认是什么，如果省却默认为中心电话是不是这个是干嘛的。中心点的位置是不是OK，然后呢，形状吧，默认值是什么？圆椭圆吧是不是size是不是下面改变什么，就是我们就是我们现在讲的吧，我们是不干嘛改变界面这个形状的是吧，不对，大小吧，赛子嘛是吧，改变这个大大小吧，它有几个字啊，1234吧，我们来想，可side是不是最近的边啊，这代表什么意思啊，最近的边来写一下，看这个语法好前面那个空格。

最近的边是什么意思啊？来看一下，一开始我们来看它是它是什么样的，默认是不是这样的，那现在是不是这样的，他说按照最近的边来分，怎么分的。这条边吧。是不是离你圆心最最近的一条边，是不是按条按照什么这条边来分的吧，不信我们来看看，我们把这个渐变的值变变，我们这个嘛，就直接到50%了，前面是一，然后到百分之。50，然后前面PI直接到百分百了是吧，这个比较好看吧，如果现在我什么都不写啊，这个边我不写，不到最近的边我都不想看。情况什么样的，这里关掉是不是，你看50%都要变什么干嘛在哪。这是不是50%啊，能不讲看按照最近的边。

是不是他按照最近那边走，你CTRLB按照L最近那边看变成什么样。一样吗？不一样，按照最近那边怎么分呢。在哪这边吗？能不理解，OK，还有呢。还有什么值啊，最远的边吧，CTRLC是吧，按照最远的边，这个你看看。按照最里面怎么来的，一样吗？都不一样，按照最里面不是按照它吗。不是在这吗？真的讲OK，然后呢，按照什么。最近的角跟最远的角吧，这就奇怪了，最近角，最圆角。现在角度是一样的。随便的哪哪个角，它的距离都是一样的吧，除非你中心点变了，中心点变的这个最近角最角就有区别了，是不是，我看如果是最近角来看一下，现在如果是最近角。

Contraa。过来。这边多了个一码，OK，看一下。整点应该跟第一个是一样的。是不是用的好像是默认值吧，是吧，来看好像这个值就是什么默认值吧，好来看一下是不是还有一个什么最远的最远角，现在最近角最角肯定是一样的，跟第一个是一样的，这两个肯定是不一样的，是吧？最圆角跟最角线是同一个角嘛，是不是？那我们就来测一测懂吗？怎么变它的圆心吧，是不是啊，OK，看最后的参数就是用来变什么。圆心的正经里面是什么？艾特吧，整理我们说最终这边来个什么。就是来指定这个什么圆形的怎么讲来看一下。这个时候你看最近的角在哪？

其实这个圆心我给打100PX100PX圆心是不是在100PX100P，你看这些这个是不是。圆心啊，最近的角，按照哪个角最远还是最近啊，最远的吧，是不是这个角。你看一般是不是在这边，是不是，我们来看一下默认值到底是谁。干掉CTRL。好像是最圆的角是不是，比如说我写一个最圆的角来看一下是不是一样的。一样的默认值，好像是最远的角吧，我把它换成最近的角。你看这是最最近的那个角吗？你看这个平分50%在这边，那么就讲如果你说这个角稍微的近一点。哎，给你们换了个小太阳是不是这样的，那么下OK，那道这一块这个界面能不能理解了啊，这是镜像界面的一个语法啊，稍微的帮你们这边注意一下，我们说这边的默认值是谁啊。

最远的角这个是什么默认值啊？文档上面也没有给，可是我们自己能测出来，懂吗？OK？好，那今天的课就到这边结束。