尚硅谷前端基础 (94)

好，那么除了线性渐面呢，还有一种叫做一个镜像渐面，其实觉得镜像界面翻译不太好，它应该有点类似于就是放射的一个意思啊，那个radio啊，Radio叫做一个这个greenent啊radio greenent就是放射的意思，就是你现在我们这种界面效果，它都是沿着一个方向对吧，一个方向的，而我们那个镜向界面，它会有一个中心点，像太阳一样，它向四周，哎，四周360度的圈去放射啊，就是一个放射这么一个效果，我们来看一下啊，叫做一个哎。镜像渐变镜像啊，就是这个半径的镜啊，点示箭头，嗯，我们直接看一个效果啊，写一个页面，然后这里边我们来一个点一个box1.1个BOX1呢，在这我们来写一个style标签，其实用起来也很简单啊，也很简单，呃，Wise我们来一个这个300啊，Head来一个300，然后background color background color，我们先设置一个啊，先看看它跟哪井号一个B，嗯，直接给它运行一下。

哎，是这么一个效果，那镜像界面怎么设置呢？你直接看了background，一个image啊image我们用的是一个radio的一个green啊radio一个greenent radio啊greenent这个表示叫做一个镜像界面啊，镜像界面它是有一点那种放射性的效果啊，放射。啊，放射性的一个效果啊，当然不是说你用你会受到辐射是吧，就是它这个颜色是从中心点向四周去延伸的啊，直接一看效果就完事了啊，来一个red，来一个yellow，哎，逗号啊，来一个yellow，那这个时候你看哎，你看红色是不是在最中心啊，诶黄色是在最外围啊外围，然后中间是一个渐变的效果，其实跟之前那个没有什么太大区别啊。

包括你可以定多个值，然后也可以指定那个颜色的开始位置，所以这些我就不强调了，在这里我们主要说我们那个不一样的地啊，不一样的地方就是它所谓的这个镜像，就是从中心向四周去放射啊，向四周去放射，好，那这个时候其实我们很明显能看到啊，那这一块中间它是有一个圆心的，对吧？有一个圆心的，这个圆心现在我们能明显感觉到它是一个正圆，对吧？它是一个正圆，那为什么是一个这个正圆呢？啊，那这里边注意了，现在看着啊，我把高度改了来一个500像素，这时候还是不是正圆了，哎，就不是正圆了，它是不是变成一个椭圆长条了，哎，长条了，你看是不是，是不是这样的，哎，是一个长条效果，所以这个时候注意我们默认情况下，默认情况下我们这个什么呢？哎，我们这个圆心啊，我们这个圆心是什么呢？是根据我们，诶这是啥呀。

哎，这样少一个注释吧。哦哦哦，我这块啊，为什么报错了，因为我这个注释啊，发生嵌套了啊发生嵌套了，我们这个把这个往上上呢，这来说就可以了啊默认情况下我们这个圆，哎，我们这个叫做诶叫做镜像渐变啊镜像渐变的形状它是什么呢？它是根据什么呢？根据我们这个元素的这个形状来计算的，简单来说，你元素如果是正方形，我这个镜像渐变也是个就是个圆形，你如果元素是个长方形，那我镜像渐变就是一个椭圆形，所以基本上是简单说一下这规则啊正方形，那你就对应的是一个什么呀？哎，对应就是一个圆形，哎，如果是我们这个长方形，哎，长方形那对应的就是一个什么呢？对应就是一个椭圆形。

哎，椭圆形啊，镜像渐变，哎，圆心的形状啊，圆形的形状，所以这个时候注意它的形状是会根据你的那个不同的这个图形会改的，那这里边我们也可以去调整啊，我们也可以去调整，怎么调整，那我们也可以什么呢？哎，我们也可以手动，哎指定我们那个圆心的一个大小，圆形大小，比如说在这儿我就可以写一个开头，我可以写什么呢？比如说写一个100像素，然后100像素，然后逗号，那这个时候就表示什么呢？哎，表示我的这个圆心的大小是一个100乘以100的，呃，或者说它其实也不能说圆心的大小，其实就是镜像渐变本身的大小啊，指定我们这个镜像渐变的大小，指定它的大小什么意思呢？你说现在的效果就是我这个镜像镜面的范围就是一个100乘以100的范围，哎，里边是红色，外边是黄色，但是外边为什么现在都变成黄色了，因为你外边是没有。

指定颜色呀，哎，没有指定颜色，那就外边就默认全都是黄色啊，全都是黄色，那你如果你用的是我们那个repeating，那个re，哎，Repeating多了一个P啊，多了一个T，那这个时候是不是就会发生重复效果了，哎，发生重复效果啊，所以这个时候我们可以通过这个来指能的大小，那现在一百一百就是一个圆形，那你知道是一个一百二百就变成一个什么呀，椭圆形啊，我们可以自己去指定它这个镜像渐变的一个大小啊，然后的话，其实它也会有值可选一个，我们可以写一个这个，呃，我们来看一下这个值，这个参词我忘了怎么拼了，叫做一个circle。在这儿啊，你可以用一个circle circle就表示的是一个圆形啊，就是一个正圆嘛，Circle表示一个正圆，还有一个我们这个玩意儿叫做一个什么呢？这个就表示的是一个这个可给它粘过来啊，Circle表示一个正圆，这个als啊，Als表示的是我们的一个这个一个这个这个。

这个这个这个椭圆对吧，这个椭圆，但是现在的话，其实诶情况比较特殊，因为我们这个图形它就是正的对吧，正的所以这个椭圆这个效果出不来，我们把它改成500，改成500，改成500当是默认就是椭圆了，对吧，然后我这换成circle啊，换成circle，你看circle就会变成一个正圆，哎这个哎aapse就是一个这个椭圆的一个效果啊，所以这里边我们可以通过这两个值来确定，当然我们也可以自己指定这个大小啊值大小好那这一点我们就不多说了啊，给它改回来，呃，那这时候是我们说的一个它啊默认情况下，其实就是这个这个这这这个circle，但是现在啊，Els我们现在看不出来，看不出来，待会我们来挤，看看能不能让它出来对吧，能不能它出来啊，这个表示一个腿，我们先换成circle啊，这个是我们的一个大小啊大小，然后呢，我们还有一个什么呢？我们也可以什么呢？诶也可以指定我们这个渐变的一个什么呢？渐变的一个位置，比如说我把它指的小一点啊，我来一个100像素。

100像素啊，100像素，那也就是说表示现在我的渐变区域的大小就是一个100像素，100像素是不是在这个区域啊，诶，那其实你会发现我这个渐变正好是在我这个图形的正中间，哎呀，这个颜色太难受了，颜飞啊，换一个颜色。哎，难看点难看点吧，是吧，我们大概这么个意思啊，像西瓜一样对吧，那这个时候现在我们这个渐变效果正好是在最中间，那比如说我不想它在最中间怎么办呢？哎，我们在这儿可以后边啊，这个不是这个大小吗？我们可以后边给它来一个什么呢？来一个艾特，艾特来指定它的位置，比如说我来一个艾特零零，艾特零零这就表示什么意思呢？表示我们这个原点在我们的00点，00点是不是就就跟这儿啊，哎，所以这个时候你看我这个渐变的位置是不是就跑这儿来了啊，就跑这来了啊，或者呢，我也可以写一个，那我写大一点，我写一个100像素，100像素啊，100像素，那这个时候就跑到这个这个位置了，对吧？同理啊，我就不写了啊，其实都是一个一个套路，我们写一个CT呀，Center，来一个这个center，那这个时候就跑到了正正中间啊，就这么一个效果，所以这个时候我这个东西我就我就不去不去多演示了啊，不去多演示了，那这也比较简单，就是前边这个是设置大小的。

这设置大小的什么什么设置位置大小你可以不写。哎，你也可以不写，你直接写一个位置，这样也可以啊，比如说你写一个top left啊top left，这时候你让他干嘛呀，让他去去左边是不是就跑这儿来了，哎，左上角啊，这么一个效果啊，可以通过它来指定一个位置，然后的话，这里边我们呃还有一些这种这种特殊的值是吧，像什么你看这种东西啊，这种东西叫什么呢？叫做一个这个。

呃，Close的啊啊，Close side啊，这叫一个close的一个corner，哎，这叫一个farthest side，这叫一个farthest corner close的近的，Farthest的是远的，Side是一侧，诶，这个corner是一角，那这就是什么呢？这就是近边，最近的那条边这表什么呢？最近的那个角这表示什么呢？这表示的是最远的那条边，这表示的是最远的那个角，这是干嘛的？我们来看一下它这有没有那个。有没有那个那个那个那个那个案例，其实这个东西也很简单，他说的就是什么呢？就是说的是我们那个我们这个渐变啊，它所到达的一个这个一个位置啊，也就是这个渐变它到底在哪个位置，我们来看这，你看这就是那个，你看现在fast的一个corner是一个，也就是说它实际上是写到我们这个前边的对吧，前边的我们直接看一下吧，我们直接我复制一个close。

那现在呢，回到我们这儿啊，我现在把这个位置啊，我改一下，我改成一个这个叫呃，0000呢的特点就是跑到我们这个左上角了啊左上角了，那你现在看我们这个渐变的效果，渐变的话，现在的效果你看它是不是到这儿，到这儿到这儿是不是都会有渐变呀，哎，你说现在它特别远啊，那我可以改一下，我可以前面加一个叫做close size，那这个时候你会发现我这个渐变的效果，我是不是在这儿都看不见了，哎，看不见了啊，我把这往下挪一下，我来一个100像素，100像素，这也来一个100像素。哎，你会发现咱们在这儿不能这个位置我们就看出来了，如果我不写它，如果我不写这个close side啊，Close side，那这个时候你会发现我这个渐变的范围是不是整个把我这个给给铺满了，哎，给铺了，当我写了一个close size表示什么意思呢？近的边，最近的一侧，也就是说什么意思呢？我这个渐变现在只到我最近的一侧，离我圆心最近的是不是就这两边啊，哎，这两边，所以你看我渐变的大小，是我这儿到这儿的距离，你看这边有没有渐变，这边是不是就没有了，哎，这边就没有了，是这么一个效果，那同理我们还有一个叫做far fair set吧，Fair set直接粘过来，那这个时候我们再看效果，那这个时候它是不是就跑那个远那边了，你看这边是不是也都有这个渐变效果，哎，也都有这个渐变效果，所以这个发赛就是一个远边啊远边。

然后呢，我们还有一个叫做这个叫做closed corner叫做近角，最近的那一个角啊，最近的一个角，因为这个值比较烦人啊，我们也我也我也听不太明白对吧，那这个时候就渐变就跑哪去了，是不是到这个角度了，哎，这个角度了，所以比那个边稍微多一点，它就等于和这个角，就等于是这样的一个形状啊，这样一个形状和角，然后还有一个我们这个fast啊fair。

AHER是吧。E，完蛋，刚看完就忘了，对吧，我们叫做一个发的fair fair是吧，我们这个圆角圆角，那这个时候你看这个界面就到了这么一个范围，其实圆角的话，基本上就等于把我们这个元素给给铺满了啊，给铺满了，所以这个时候呢，嗯，你看前边的话，我们来说一下啊，说一下它的整个一个语法，我们总结一下语法啊，我们这个radio的一个这个greenant啊总结一下，因为这个东西其实我用的也不是特别多啊，所以你看很多的属性我本身也记得不是不是很熟悉啊，所以这个但是的话，你要能保证你知道有些东西，你要知道每一个东西都表示的是这个。

什么意思哎，然后你用的时候你知道选哪个东西就OK了，所以这一块一定要啊，还是记不住没关系，一定要能混个脸熟，好歹好歹最最最不济是吧，那最低要求你要能对照着这个文档去使用啊，第一个啊，我们来直接用中文写了啊，第一个是我们这个大小大小，然后大小后边艾特的是我们这个位置啊位置，然后这块是我们一个逗号，逗号后边是我们这个颜色，然后呢，每一个颜色后边也可以跟位置啊，然后呢，逗号我们可以写多个颜色啊，写多个颜色，你想写几个颜色都行啊，那大概呢，是这样一个效果啊，颜色位置，颜色位置想写几个颜色都行，那这个颜色位置我们就不说了，我们主要说这两个东西，一个是我们这个大小，大小的话，我们可以，哎大小啊，或者说是它的这个形状对吧，形状哎，其实就是主要就是大小对吧，大小你可以用这个circle哎圆。

行，你也可以用这个表示的是我们一个椭圆，你还可以用什么呢？还可以用这几个值啊，Close close size。哎，我们远远边啊，这个叫远近近边是吧，这个叫做一个近角，然后这个叫做一个远边，然后这个是一个这个远景。哎，这个是什么呢？这个是我们这个圆形啊圆形，这个是我们这个椭圆啊椭圆，然后呢，这个是我们的一个这个近边啊近边。近边，然后这个是我们一个近角啊，近角然后的话，这个是我们的一个这个角度，哎，然后呢，这个是我们的一个远边，这个是我们一个圆角啊，圆角那大概就是这么几个值啊，关于我们这个大小，还有位置的啊，大概这么几个值，然后位置的话，我们来说一下位置，其实也是那个位置的话就没得说了，跟我们这个偏移量是一样的，什么top呀呀，什么light呀，还有这个什么C呀，Center啊，还有我们这个bottom是不是通过这几个方位的词来指定了，但是你要记住了，位置要艾的开头啊，艾开头也可以通过我们那个像素值是吧，那个具体的大小来指定我们这个这个东西啊，Radio叫做一个，诶grent这个东西暂时就先了解一下，后边我们用到的时候还会强调，整体来说的话，用的不多，就是一些个别的一些效果的话，可能会用到啊，都是极特殊的，所以它呢。

啊，并不是一个你现在需要多么多么重视的一个东西，了解一下，知道这么一个东西，然后我们可以再看看文档，我看看有没有什么落下的。

呃，文档的话呢，基本上就是这么多了，那这块我们暂时也没有什么可说的啊，这些基本的用法，基本一个语法，哎，我们了解了就就OK了啊，还是哎，知道一下他怎么怎么用啊就行了啊好，那还有一点就是补充的话，其实就是你像这个大小啊位置啊都可以省略写不都行啊，你说我就写大小，不写位置没问题，就写位置不写大小也没问题，但是记住了，如果写位置了，一定以爱开头，并且它们前边是用空格隔开的，后边呃之间颜色和这些之间是用逗号隔开的，这一块一定要区分开啊好，不多说了，了解一下就完事了啊，停一下。