16.尚硅谷_css3_新增UI方案-新增UI样式-圆角.wmv原创

OK啊，嗯，手头上没有解决的问题，先放一放，继续听课啊，把知识点先跟上，没有准备的自己先记一下啊，OK，来看啊，刚视频录了是吧？OK啊，这个视频没有录的话，稍微提醒我一下啊，OK，他在一闪一闪的就在录啊OK，刚刚我们讲了和模型影道义。Size跟什么嘛，是吧，其实S还有一个词叫contain books啊，就是我们一般它的默认值懂吗？就是跟指定的是什么内容去的尺寸啊的话，指定的就是寸，那么没有也没有，那么只有books跟board books OK，好我们再来看，好这是我们讲的BOOKS31属性比较重要的啊，其实我们说刚刚我们还有一个什么。核模型倒影啊，Science都已经讲过了吧，OK，那我们讲啊，新增UI方案里面的最后一个知识点啊，新增的UI样式啊，里面可能涉及到比较重要的圆角渐变背景啊，除了这个边框图片可能稍微有点积累，其他三个都比较重要，好，我们来看一看。

啊，什么叫鸡肋啊？鸡肋就是。鸡肋就是鸡肋，OK，第三我们来看一下啊，叫新增UI样式。这里OK，第一个圆角，好，先直观的来看一下圆角啊，离圆角点HT秒，OK，来看这个圆角好来个div，是不是div，我们ID还是叫做test OK，好要视表啊，这个学CSS1定要自己去画框框去玩啊，我大学时候在学CSS路的话，其实每天都是在玩盒子啊，就一定要去测试它不同的属性啊。

在大学里面，每天在图书馆玩粉颜色盒子的那个变态OK，嗯，为200PX，为200PX OK border啊1PX实心周眼OK。好一个框，让它居中，居中怎么办？类型为还lo left为立啊，这是我用的最多的一个形式吧，Right也为零，为什么它好记啊，Top也为零，OK，这跟我们绝对那位盒子的特性有关系吧，嗯。波特为零，切记马要为总，你它必须要根hat好居中啊，原角怎么写？

OK 50%是不是OK就会出来一个圆吧？是不是OK？那到底圆角是怎么形成的呢？我们来看一下，好看看课件。啊，做圆角这个东西啊，不要看我们现在比较轻松是不是啊，传统的圆角生成方案必须是用多张图片做背景啊，之前你在C3之前想做圆角，你得让有I画图画一个圆出来，然后你把这个嘛，它可能就是画了一个正方形出来啊，正方形里面画了一个圆。对吧，这边都是搞成透明的，然后把它做成背景啊，很烦的，而且得发请求吧，是不是啊，一一张图片必须得发请求吧，作为我背景图片src区域。引用嘛，是吧，C3圆角出现之后，使得我们再也不必浪费时间去制制作这些图片了，而且它有些其他优点，减少维护的工作量啊，为什么图片的生成更新啊，这些UI的工作量是不是就不要了是吧？第二点提高网页的性能啊，它不必要再去发出多余的P请求嘛，直接是不是我浏览器去渲染了，需要发请求吗？不需要啊，这是它两个优势，第三优势，增加视觉的可靠性啊，为什么每些情况底下，如果你网络拥堵了啊，你网不好了，图片是不是有可能请求不回来的，是不是这个时候你想是不是会导致这个图裂掉，图一旦裂掉的话，这个效果是不是就干嘛不加了，那没讲使用C3呢，要么就没有。

网慢的时候干嘛，显示不出来嘛。往好的时候干嘛，肯定能显示出来，不会发现这种吗？裂度吧，懂吗？OK，那如果用C3的圆角就不会出现这种吗？这种问题啊，它的是有很大的优点的，基本上CSS3的属性要么是为了提高性能，要么就是增加这个UI的体验，用户的体验，让我这个CS3的效果变得更炫，懂吗？像我们全三星昨天是不是用了一下？

全三性啊，发现是不是可以帮我们节节约大量的GS代码，能不能理解啊，OK，那波动认识到底是怎么来的呢？到底是怎么出来一个圆的呢？啊，它的属性值到底有哪几种呢？我们仔细来看一看啊，这个波璃其实50%，你从百分比百分比总得有个参照物啊，50%参照于谁吧，是吧，他的50%你看。好，我们说圆角好，首先来看到值，默认值是零，它是不可集成的，是不是？如果使用百分比定义圆形半径或椭圆的半周长。半长轴跟半短轴吧，是不是水平半轴相对于模型的宽度，垂直半轴相对于和模型的。高度相当于谁的百分比啊，要么求个模型的宽度，模型的高度吧，不能使用负值啊，比如说负50%，那就不靠谱了。就没有了对吗？不能使用副词。

OK，那这个百分比是参当于什么Y害的什么，所以这个时候其实我这个玻璃内玻璃是多少。100PX吧，走你看是不是100PX啊，是不是，其实这个玻璃是一个简写属性。这个玻璃代表四个角，干嘛不是有四个角吗？上右下左吗？懂不懂？也就说上下左都是100PX，这是什么意思呢？是不是我们外面有个框啊？是不是其实他就在内部画一个圆，懂吗？比如说现在我不给100P，我给个30PX，你看会是什么样的。整理为什么是这样的，它就是在这个内部画了一个圆。画了一个半径为3P圆，然后往这个四个角上去怼。懂不懂，刚刚怼到什么跟你这个边，跟你这个角干么相交的地方，它就取取什么对等圆弧了解，其实就是内部画一个什么，你现在不是指指定一个半径吗？那我就在里面画一个啊。

圆画的圆之后往四个角上面去啊。分别的去怼，怼上去，刚刚相交的时候，取相对那单圆弧作为你这个角的圆弧。这这个能不能理解啊，刚刚为什么我们写100PX，或者说写50%的时候，它就是一个圆。你想啊，你这个框是不就样的，我这个圆往四个角上怼，怼上去不都这样吗？正好把它干嘛包住了吗？是吧，是不正正好给他包住，完蛋，正正好好包住。差不多吧，Nice，看一下这包住。差不多吧，是不是因为这个圆你往四个角上怼都是这样子啊，是不是，那我就取这段圆弧吗？是不是你们看到了一个圆吗？这能么理解，OK，而且你这个东西如果问你如果是10%呢。

他还是一个。这样的一个圆为什么60%，它最最多到哪？到你的100，到你这个什么一半对吧，你60%其实拿的是一百二吧，效果跟100是一样的，懂吗？有百分之100%，100%呢。也一样的，懂吗？OK 1000%玩吧，一样的。懂吗？所以说它不可能超过什么半径一半的啊，不，不可能高出它的吗？宽高一半的这个半径的选取懂吗？而且我说了这这个这是一个简切平，代表四个角的，懂不懂？刚刚我们写的是100PX，说明是不是干嘛往这个四个角上面推的都是一都都是一个半径为100PX圆吧，那我干嘛可以推不一样的圆吧？你看上右向左吗？上右下左，那现在出来的是一个什么鬼？

这个圆弧是不是稍微短一点，10PX嘛，这个是20PX嘛，30P还是10PX懂吗？其实第一个就画一个10PX的圆，慢慢往上给你怼是吧，这边呢，20PX圆慢慢往上给你怼，这边呢30的圆对，这边呢40个圆对。能理解吗？啊，这个圆稍微稍微有点丑啊，这个啊注意一下就行了，OK，好，那现在我们画的是不是都是圆啊，它其实还可以画椭圆。啊，你定一个椭圆的半径。那第几个卖掉。一个椭圆你要定几个半径？两个半径吗？长半奏跟短伴奏吗？是不是啊，那怎么办呢？诶。60比较好看，第一个其实是一个椭圆。

你能发现是个椭圆是不是，其他的是不是都是个嘛。正常的。对比一下嘛。诶，不一样了吧。不一样了吗？是不是好像我这种写法有问题吗？我刚才不这么写的，OK。这是我一开始的样子吧，是不是现在我是不是只加了个杠60啊，这点量是不是应该只变第一个椭圆，你发现别的角也没变，也变了吧，这是为什么？来看一下。来看一下哦。来看一下我们的API应该是怎么样去定义的。啊，来看这是我们使用什么？你可以使用PX，也可以使用百百分比吧，默认之零不可继承是不是？你可以画圆也可以画椭圆是不是啊，OK，来看一下这个值的这个规范到底是怎么定义的，这是一个简写属性嘛，说谁啊，博德radio只是一个简写属性，用来设置什么？你看先是左上角，然后是。

右上角就是上右下左吗懂吗？就是顺时针干吗转一圈懂吗？OK，那半径的第一个法值可以取一到四个字。啊，如果写的话，是不是所有的四个角都是用这个什么半截圆啊是吧，这么写呢。两个值呢，啊，这个我们什么，我们一个来看，如果是一个值。就是代表是这四个角，这四个角你看都是一模一样的，是不是，如果是两个字呢。两个字呢？啊，你看第一个值是不是干嘛。

这两个角第二个是干嘛，这两个角是不是，也就是说第一个值是你。正方向吗？什么叫正方向？就是你右手画，画下去最高。这叫什么？正斜杠懂不懂？说第一个值代表的是正斜杠上面那两个角，第二个代表的是反斜杠上面两个角。懂不懂什么叫正斜杠？你右手画下去，这个杠就叫正斜杠。懂不懂？顺势画下去的这条杠就叫右斜杠，你要反手画的这条杠就叫。反斜杠能不理解啊，左撇字就对不起了啊，右撇字就是这样的啊，就是顺手下去啊。这个杠，这斜杠反手左斜杠懂不懂，第一个字代表的是这斜杠，第二个字代表是啊反斜杠啊左撇字换一换啊，OK，好，那是不是，这是这是单子的情况，这是双子的情况吧，还有什么三子的情况吧，是当中再来一个字。

比如说50PX这个是40PX，这两个值其实代表的是谁？正斜杠上面那两个字是不是来看一下是不是，你看跟前面这个是不是还是一样的，说明这两个字代表的是正斜杠上面的两个角吧，这个呢，50X代表的就是你反斜杠上面那两个角，懂吗？OK，然后有什么。四个字，四个字我就不说了啊，四个字代表什么意思啊。四个角吗？是不是上就是顺时针转过来的四个角吗？是不是1234嘛。这能理解吗？Okk，这是什么？四个角OK，那线是不是还有另外一种写法？看另外一种写法是一个什么鬼？这个斜杠。嗯，来看半径的第二个语法值吧，它也可以取一到这四个值吧，这个fast radio value除以一个radio是不是，然后是fast。

诶，我怎么看不懂这种写法。看看。这代表什么鬼啊？第一个圆角值，然后杠一下代表什么意思？我们来看看啊，差不多我能知道，哎，比如说现在我是一个40PX吧，我杠上一个60PX，这代表一个椭圆。是不是相当于你在这里面画了一个椭圆，你把这个椭圆往这个四个角上对。是的，怎么讲，因为这两个东西是不是确定了一个腿啊。是不是长半轴跟什么。不是这是短半轴跟长半轴嘛，这个首先前面这个只代表你X上面的一个什么。

轴距离也是什么，这个轴第二个轴是什么。外置上面的这个是多少？一个是40，一个是60，你说你画出来的椭圆其实是这个样。这能理解吗？然后把这个椭圆往这四个角上面去干嘛？对吗？能不你讲OK，看第二种法干嘛，第种法什么？他说。什么发后面你看是不是跟两个字啊，这代表什么意思啊。你看现在是不是长成这样的？是不是啊，你看这种写法跟我们这种写法是不是一样的，看一下看一下是不是一样的。英语。好像不能这么写吧，你看是不是不支持这种语法，可是我们来看这种语法，想想，如果我这边给个事实，那第一个是个椭圆，第二个是不就是一个啊，是不？你看发是不是托腿，这什么意思，这些干嘛，你看左上跟左下吗？不这个吗？

左上跟右下马正斜杠上面那两个角吗？是不是来看一下最终他变成什么样？你看这个值，你看这两是不是圆，也就是说这个值跟这个值确定了一个椭圆，这个椭圆用，这个椭圆用在哪。正斜杠的是不是OK，这个值跟这个值确定的第二个椭圆啊，因为我两个值一样，说明是个圆用在了反斜杠这上面，两个角上面是不是语法我能这么写吗？不可以这么写，懂不懂，他把第一个字的吗？后面在前面这能不理讲，那后面这后面这两个能不能看懂了。

一样的嘛，也就是说椭圆的一条半径是不是在前面已经定死了，懂不懂？可是一般我们画椭圆，我们不会这么画。想想现在我给的是不是一个正方形？你看我给的是个啊正方形啊正方形你画圆那就是一个。哎，不不不，100PX是不是，那就是一个圆是不是，如果你是一个长方形的，那就是个椭圆。啊，这个是个超长啊，OK，好，如果你想弄得好好一点的话，怎么才能画成一个椭圆啊？椭圆怎么画？椭圆长什么样子？完蛋，椭圆长什么样子我都忘了，我怎么老是觉得这个就是个椭圆？

椭圆其实应该应该这么画啊，还是得这么写，是不是这应该才是一个真正的椭圆是吧？啊，你还是得这么写啊，这是我的失误啊，因为我一直以为这个就是一个椭圆啊，这原来是个操场，OK啊啊。好，呃，这是我们说的圆角这几个值，其实这个曲子还是比较烦的吧，啊，这个稍微知道一下就行了，特别是椭圆是第一个值，用来确定什么X上面那个什么。短半轴的相当于懂不懂另外这几个只是用来确定什么另外一条走道，这这个能理解吗？OK，好，可是我们得看一个问题，注意百分比，如果你使用百分比，在旧版的CH跟S不支持。啊，这我们可以不管，反正旧版的上我们都不用的，是不是你们这个PC端开发的时候有让你们去管过一个浏览器的版本问题吗？没有吧，是不是因为一般做PC端开发，我们都默认认为这个浏览器都是最新版本的，为什么哪怕你不是最新版本，它自动也会自动也能帮你做更新的嘛，懂不懂？OK，可是我们要关注移动端在旧版本的iOS跟安卓之前是不支持的，想一想移动端的操作系统的更新的频率是不是比较慢的？

是不是移动端跟PC端是不一样的，你想你们的手机的系统的更新一年也就两三次吧，是不是啊，那PC端不一样，PC端浏览器跟操作系统是没有绑定关系的，懂吗？它可以自己独立更新的。可以实时更新的，可是移动端浏览器都是绑在操作系统内部的，你要伴随着操作系统更新，你这个浏览器才能更新。所以说移动端浏览器都是比较。老大。能不能接受这个事情？PC端的浏览器是可以自己独立实时更新的，不需要伴随在操作系统的更新，因为它不是集成在操作系统内部的。可是移动端浏览器不一样，移动端的浏览器是一直在操作系统的。

内部的他得他得伴随着操作系统的更新，它才可以。更新，所以说一般移动端的浏览器都比较。狼。能不能接受这个事情啊，啊，所以一般我们做开发的时候，我们之前是介绍过在你这个台的。是不是我们去凯旋，咱们看一眼。啊，不管你去查什么属性，比如说还是查这个X好，我们看是不是分PC浏览器啊，前面五个是不是PC浏览器啊，IE这个是IE的一款浏览器，Firefox s open吧，IOS你看这边网后是不是都是移移动端浏览器啊，移动浏览器其实最最些最新的版本都不应该是我们关注的版本，像安卓一般我们是关注它四你的安卓的操作系统，其实现在在四跟4.1之间的版本还是比较多的，懂不懂说在这种版本底下我问你啊，用百分比行吗？

用百分比行吗？不行，在旧的iOS跟安卓中不支持啊。百分比的，也就是说你用百分比很有可能在移动端就会失效，说在移动端开发，切记圆角最好使用。PX值不要使用百分比啊，这都是有说法的啊，这长期实践下来，实践下来的一种结果懂吗？好，记住PC端开发你化学角，我不管你百分比也好也好，移动端尽量使用。PX值OK，那之后做到移动开发时候要切记啊，好，这边我们讲了OK。好，那其实到这边我们这个API就讲完了。