尚硅谷前端基础 (59)

好，那说完了这个盒子的尺寸，接下来我们再补充一个这个和我们这个边框相关的这个两个样式啊，在这儿我们新建一个文件，我们叫一个幺二，我们说的是我们这个圆角，哎，轮廓解说啊，轮廓和我们这个圆角。呃，轮廓和圆角是干嘛呢？我们先说轮廓啊，在这我们先整一个BOX1 box1呢，在这我们直接写一个这个style标签，Style标签啊，我直接来一个点一个BOX1 box1我们来一个这个叫做一个是一个200HI的是一个200BACKGROUND color background color，我们来一个这个井号，一个b fic，诶b fic这保存一下，然后在这我们直接运行。运行完了出来以后啊，我们知道以前我们说过有一个东西叫做边框，直接来一个boer，我们来一个十个像素，然后然后来red来一个这个solid，这个是我们一个边框啊，设置完了就这么一个效果啊，这是我们边框，当然我们说了边块它会有一个问题，你设置完了边块，它实际上会影响到我们页面整个这个元素的一大小，当我加上这么一个十个像素，一个边块以后，实际上我整个元素的一个它的可见框是不是就就变大了，哎变大了，因为它是一个会影响大小的嘛，那这里边其实我可以直接把凹包ER换成一个东西，我们叫做一个outline，诶你看我换成outline的效果，什么效果，看到了吗？诶也说实际上我换完奥啊，这么看可能看不出来我在这儿啊写一个SPA，我写一个哈写一个哈，写一个字啊写个字，现在呢，我先把它换成什么呢？换成borderer啊，换成ER看效果低低borderer看效果啊一刷新，当我设置borderer以后，你会。

那上边的边距啊，左边的边距啊都在，并且它实际上是把hello整个是往下挤了，也就是说我们设置包的时候，它会整个影响我们元素的一个大小，元素大小变了，它下边的元素像哈漏是不是就被挤下去了，哎，挤下去了以后，我页面的布局就受到了一个等于是一个影响啊，是一个影响，而我们这个outline啊，你直接把borderer换成我们这个outline，我们来看效果，这时候你看啊，首先其实你要仔细看的话，我设置完这个奥特line，你看我这个元素的位置有没有动，呃，没有动，只是它在它的外圈加这么一个红色边框，并没有影响到我们整个页面的一个布局，并且你看啊，这hello是不是也被我们这个边框盖住一部分，并没有被这hello挤下去吧，哎，并没有被这个边框挤下去，所以这个就是我们说一个outline，也就是我们所谓的一个什么呢？所谓的一个轮廓outline，它用来什么呢？哎，它用来设置我们这个元素的。

一个什么呢？轮廓线啊，轮廓线它的用法啊，用法和我们这个borderder啊一样啊，用法和我们这个borderder一模一样，哎，一模一样啊，用法是一样的，你看都是大小颜色，还有一个solid力，它和包ER不同的点就是什么呢？哎它哎我们这个轮廓和我们这个边框不同的地方就是什么呢？哎，不同点哎就是我们这个轮廓它不会什么呢？哎，不会诶影响到我们这个可见框的一个大小啊，不会影响到可见框里，不会说我加完了这个轮廓以后，我整个元素就变大了，不会啊，它只是用来设置一个，就相当于给描个边一样，它不会影响布局，只是显示这么一个效果，所以一般情况下轮廓我们用的也不多，可能只是什么呀，像这种东西我可能不会这么写，我一般都怎么写呢？哎，我可能是在我鼠标一入的时候，我给它设置一个轮廓，比如说我直接。

点一个BOX1 box1我们直接来一个冒号ho，诶当我鼠标移动到这个div的时候，我给它添加一个轮廓，其他的时我不添加对吧，可能就做这么一个效果，但是这儿如果你换成boer的话，你会发现效果就会大不相同啊，我移动以后，诶，它是加上一个跟刚才那个效果其实差不多，但是不同点你加上这个boer以后，整个元素是往下走了，哎往下走了把我们这哈都往下挤了，所以轮廓跟borderder的唯一的特点就是轮，轮廓不会影响到页面的一个布局啊，不影响页面布局好轮廓我们不多说了啊，能过一下就行完事了，都比较简单，然后轮廓完了以后呢，我们还有一个东西呢，我们也在这儿说一下吧，还有一个东西我们叫做一个，这个叫做一个阴影啊，阴影我们直接在这儿来说啊，阴影我们叫做一个box，一个这个shadow啊，Shadow就是一个影子的意思啊，影子的意思这个东西我们叫做一个影box shadow。

Box shadow，诶用来用来设置我们这个元素的一个阴影效果啊，阴影效果除注意啊，同样我们这个阴影呢，哎，阴影它也不会什么呢，不会影响我们页面的一个布局，它就像一个影子一样，就像我们人身体上那个那个影子一样，你把影子整出来，哎，影子并不会挤到别人，它只是给你显示出那么一个那么一个影啊，显示一个影，那这个时候我们用的是box shadow，它是怎么用的啊，怎么用的，那其实如果你要简写的话，其实你只需要写一个什么呢？写一个颜色，你只需要写一个颜色，这个阴影就可以设置上了，但是你会发现这个时候的阴影我看不见，看不见为什么看不见呢？因为注意默认情况下，这个阴影在哪呢？在我的这个元素的正下方啊，正下方跟元素一边大，诶，正下方跟元素一边大，我元素是200乘以200，那么阴影呢，也是200乘以200。

跟元素一边大，是一个黑颜色的，只不过由于什么呢？这个阴影现在正处于元素的一个正下方，所以我们这儿看不见它啊，所以我们看不见它，所以为了能看见阴影，我们还需要给它指定两个偏移量，我先写一个啊，我写一个十像素，然后我再来一个这个十像素，我大概写这么一个东西，你这回再看这阴影是不是就出现了，哎，这阴影就出现了，那这个时候这个十像素，十像素是什么意思？首先啊，我们先说这black black表示是我们阴影的颜色，你想写什么就写什么，你写red，那就是一个红色阴影，你写一个yellow就是一个黄色阴影，这阴影的颜色你可以自己去自己去设置，你想设置什么颜色就什么颜色，那前边这两个值什么意思呢？前边这两个值是我阴影的一个偏移量啊，阴影的偏移量，我们说默认情况下，我这个阴影是在元素的最底边，也就是偏移量是什么呢？是零啊，是零，换句话说我们阴影的那个点啊，把这准。

我们阴影那个原点，阴影是和我们这个元素是重合的，那这个时候我是不是希望诶阴影可能诶你往左挪点，哎，或者往往这往右挪点是吧，或者往往下挪点，那怎么办呢？我们就可以通过这两个东西偏移量来设置，这两个偏移量是什么呢？第一个值是我们的左侧偏移量，你就可以把它当成是margin left的，所以这个值越大，我们元素就往越往右移动，所以我写个两个像素，你看是不是就右边多出来了两个像素，我这写一个十个像素，就往外多了十个像素，所以这个相当于是我们那个margin left啊margin left这是我们阴影的左侧偏移量，同样你也可以指定负值，如果是负值，那就往反方向移动啊，反方向移动，所以这个时候我们来说一下啊，它的这个值。

哎，我们来说一下值，第一个值啊，第一个值注意它值比较多啊，第一个值左侧偏移量，左侧偏移量啊设置什么呢？设置我们阴影的一个什么呢？阴影的一个水平位置啊，水平位置正直正直向右移动，负直向左移动，向左移动，所以这个时候你只需要指定一个你想的出现的位置就行了，比如说我整一个20，那它就是向右移动20个像素跑这来了啊跑这来了，然后第二个值呢，第二个值，第二个值是我们这个阴影的一个这个呃叫这不叫左侧偏移链嘛，叫做水平偏移量啊，什么偏移量，第二个值我们叫做什么呢？叫做垂直偏移量啊，垂直偏移量这个东西你可以类比我们那个margin top啊marin top也是，诶设置什么呢？设置我们这个阴影的什么呢？哎，设置我们阴影的一个这个水平，水平位置正直干嘛呢？正直向下移动，哎。

负值干嘛呢？哎，负值向上移动跟我们这个margin top是一样的，所以这我如果写一个十像素，那这阴影就往下又走了十，如果写一个负十，那就往上走走十这么一个意思，你就是说你可以通过这两个值来设置阴影的位置，我这也来一个20，那这个时候我阴影就在下边这么一个位置，那这个时候其实你会发现它就有点像阴影了，对吧，有点像这个阴影像一个投影一样，但是还是一样啊，它不会影响布局，你写这么一个东西，它不会说这个阴影把这个字势挤下来啊，不会影响布局，好，那接着我们再来说，这是我们的第二个值，然后第三个值，我们就简单了，第三个值干嘛呢？第三个值，第三个值是我们这个阴影的一个颜色啊，一颜色，你是什么颜色的？但是很明显，其实这个颜色它并不好看，因为你一个绿的东西出现一个这个橙色阴影，它并不符合我们的一个习惯，我们更习惯的是一个黑色阴影，但是实际上你会发现，你写一个黑色吧，它同样也不好看啊。

也不好看，还不如那个好看呢，所以一般情况下，我们想一下，我们阴影没有说是纯黑的，你说你这个阴一个人的阴影是纯黑的，那不可能对吧，基本上都是什么呢？阴影是有点那种透明效果的，对吧？透明效果，所以一般的话，这个颜色我们会用一个那个rgba，之前我们提到过这个对吧，带一个透明色的，红色没有，绿色没有，诶蓝色也没有，那这个时候透明的，比如我给他来一个点三，那这个就是一个，诶透明的一个阴影不来一个点五，诶是这么一个颜色，你可可以通过它来调整这个阴影的颜色，这个时候是不是稍微的能能像一点了，哎，能像一点了，但是其实说是能像一点，但是还还不够像啊，还不够像，为什么呢？因为还有一种情况，我们阴影一般我们看人的影子，人的影子一般有没有那么的实啊，没有那么实，一般它都会有点有点虚，有点变形那个效果，而现在我这阴影是不是等于跟我们这个原来这个元素的形状是一模一样的呀，哎，一模一样的，所以在。

第四个值我可以写一个，比如说写一个十个像素，哎，十个像素这一块我们会发现有点看不见了，是吧，来一个二。我这来一个点点五哦，那这个值啊，我们应该是一个，它应该是一个第三个值，我们写到这能看到，哎，这一刷新这时候不一样了，哎，所以严格意义上讲，我这顺序写错了啊，这应该颜色是我们的一个D第四个值啊，第四个值，那你看啊，当我加上了一个第三个值以后，你会发现我这阴影是不是出现了一个模糊的效果呀，哎，你看啊，我这值越大，它的模糊效果就越好，看到了吗？哎，模糊效果越好，所以第三个值叫什么呢？第三个值是我们阴影的一个什么呢？哎，阴影的一个模半径啊凝半径，这值越大，你的阴影你就越凝啊，越凝呢，你会感觉这东西就，诶可能相对来说会真实一点，会真实一点，刚才颜色我可能需要再淡一点啊，来一个点三。

哎，是这么一个效果对吧？模糊半径设置个硬的模糊范围，那你设置完模糊半径以后，你即使不设置偏移量这个，哎，那你我写一个什么呢？我写一个这个小一点的偏移量，比如说我这写一个零，这写一个这个这写一个这个哎都是零写小一点的偏移量，那这时候你看这阴影半阴影是不是在下边也能出来呀，哎，这就是一个模糊半径，注意这俩值啊，你还不能省略，因为你省略以后这50它就不知道是干嘛的了，所以这三个值，这四个值我们一般写的时候，你都得需要写出来啊，第一个值水平偏移量，第二个值是我们垂直偏移量，第三个值是我们一个模糊半径，最后一个值是我们阴影的一个，哎阴影的一个颜色啊，阴颜色一般都会指定一个R级别，一个透明的一个颜色好，这个是我们说的这个话题，关于阴影啊，两个东西，一个是阴影，一个是轮廓，哎，并且注意阴影和轮廓它都不会影响到我们页面的一个布局，它主要是为了一个显示效果的啊，显示效果的好，这个看完了。

接下来看我们下一个一块都说完了就完事了啊，叫做一个圆角点一个box字。嗯，我们这直接点一个BOX2 box2来一个200，来一个200，然后background color，我们来一个orange吧，诶orange什么叫圆角的，我们默认情况下，你看我的这个形状都是一个矩形啊，矩形就意味着什么呢？它的边都是一个直角的啊，都是一个直角的，但是我们时代应用过程当中呢，有时候我们可能需要一个什么呢？诶我可能需要一个这么一个圆角的一个效果，对吧，需要这么一个圆角效果，那这个圆角我们要怎么做呢？啊，圆角我们要怎么实现呢？呃，一般情况下，我们一般情况下用的都是一个这个值叫做一个borderder，叫做一个这个radius，诶radius啊borderder一个radius这个值用来干嘛呢？它用来设置我们的一个圆角。

哎，用来设置我们的这一个圆角，当然这里边啊，因为我们圆角实际上是有四个方向的，这个左上角，这个诶，这个右上角，这个右下角，还有左下角，是不是一共有四个方向，诶一共有四个方向，所以除了borderder呢，我们还有一个叫做什么呢？还有还有四个是吧，Borderder，诶，Borderder top top left的diers，那这个是什么呢？这是一个左上角啊，左上角还有什么呢？呃，Borderder的一个top right riders。

诶，Right一个raus，那这个是我们的一个右上角，还有什么呢？还有啊，还有我们叫做一个borderder的一个，这个包的一个leftdi，我们写上啊，我现在先告诉你有这些值，然后还有叫做一个包的一个，这个包的一个哎，RA1共有这么四个单独设置的啊四个这是设置，哎左上角这是设置右上角，这是设置右下，左下角这是设置右下角，你看这你看你能拼出来，Top left上左，Top right上右，这个bottom left下左，Bottom right下右，你都能拼出来，那这里我就不再去给你强调了，但是你可以自己试一下，我就不一个人试了啊，我就不一个试了，我们先拿谁试呢？我就拿这个boder top left的redeer试，我们拿它来试，这个是设置我们这个左上角的啊，设置左上角top left嘛，左上角，所以这个时候我可以用它来指定我们的圆角，那这圆角怎么指定圆角，那既然是圆了啊，既然。

是圆了，所以这个时候我们圆角这个东西设置什么呢？圆角设置的是我们这个圆的一个什么呢？圆的一个这个半径大小，半径大小，也就说你这个半径是多大的，因为圆角嘛，你这个要有一个这个弧度，而涉及到弧度，我们在这儿就是通过这个半径来指定的，所以比如说我写一个这个，诶写一个实像素啊，实像素那就表示什么意思呢？表示我左上角那个圆角的半径是一个实像素啊，实像素你看诶，它这是不是就出现了一个圆角啊，这十像素怎么来的啊，十像怎么来的，我写大点啊，我写一个50像素，我们来看看说一下它怎么来的，其实这个东西说来也非常简单，我们拿这边举例子，因为这边已经圆了，对吧，这边举例子，我这个圆的半径设置的是一个50像素，那么50像素它怎么办呢？它就从这儿啊，你这儿找。

量一个50，这是也量一个50啊哎，然后从这儿去画，找到它们两个，一个焦点在这儿，那这个点就是我们圆心，然后以它为圆心，以50为半径干嘛呢？画圆，画完圆的效果就正好跟这两个点去相切，相切完了这个圆角就那么一个效果，当然我这画的比较难看啊叭，较难看，我们来看看文档里有没有啊，有没有我们直接找一下build border radius啊，我们直接点开他这应该会有一个这个示例，我看看有没有啊。诶，他这还没有，我们看看别的older top left的Di，我们看这有没有，诶在这儿他给你展现出来了是吧？这个是我们默认情况下，是不是没有圆角啊，哎，当有圆角的时候，比如说你这是一个实像素，它就会以这个什么呢？诶以这个实像素为这个半径干嘛呢？画圆，以实像素为半径画圆，那这个圆一定会以你的两个边会有一个切啊，会相切，它会相切，相切完了以后就在那个切点，那因为这个正好是不是圆，圆弧就跑这来了，哎，所以就以那个点去画圆，所以啊，这borderder，这个radius一定注意，它指定的是我们圆的那个半径，也就是说这个半径越大，你的这个东西，这个角的弧度是不是越大呀，所以其实这50是哪50，实际上就是这段距离就是50啊，以这儿画了一个50像素的一个圆，这个圆角出来了，所以我这如果写一个60，你看这弧度会会更大，我写一个160。

就更大了，我如果写一个200，因为我我这个元素整个是不是才200啊，那这个时候就整个是不是都是一个圆了，哎，都是一个圆了啊，所以这个指定的是一个半径啊，我调小一点，但是这个时候我们说了，我们的这个圆角现在是一个是一个圆角，是一个正经的圆角，但是实际上我们现实生活中的圆角，有的时候还不一定是圆，有的时干嘛呢？有的时候还是椭圆，对吧，椭圆，那椭圆就是什么意思？椭圆就是它两个方向，那个它有两个半径，那是不是就椭圆了，你看我半径一样，两个方向半径一样，那么它就是一个正圆，那如果我把第二个值我换成一个100，换成一个100，这时候你看这个满了，这时候这边就距离大一点了，哎，这边距离大点啊，所以这可以指定两个值，这个值是什么呢？哎，这个值是我们这一块的半径啊，这一块的半径，而我们的100像素是我们垂直方向的一个半径，所以这个可以理解什么呢？这是X轴方向，是水平方向的半径，这。

这什么呢？这个是我们外轴方向的半径，如果就是垂直方向，如果你两个半径一样，那我这个圆角就是一个圆形，如果半径不一样，像这种五十一百了，那这个时候就是一个椭圆啊，椭圆一个是水平方向，一个是垂直方向，是这样一个效果啊，这样一个效果你们可以待会自己去设置一下啊，自己设置一下，那这个是我们说的一个圆角的一个效果，当然这个border top left是指定的是我们左上角，诶，然后top right是左右上角，这个是左下角，这个是右下角，是这么一个东西，那现在我们说了，而我们用我们这个bordererdius啊，比亚迪亚borderer radius它是干嘛呢？它相当于是borderer，它可以同时指定我们这个四个方向的一个边框，比如说我这写10像素，那意味什么呢？意味着我们四个方向的角都是圆角，都是圆角，都是十像素啊，都是十像素，如果我写一个20像素，那就都是什么呀，20像素，那我这里边也可以指定四个值，比如说我来一个十。

来一个20，来一个30，来一个40，我可以这么去写，那这个时候我就有四个不同的圆点，那什么次序啊，还是顺时针，这个就是左上右上右下。叫做一个左下，所以这个四个值的顺序啊，我们来说一下，这个我们要说一下它的规则稍微有点变化，因为我们之前是上右下左，因为现在变成什么呀，变成了我们这个左上角右上角了，对吧？所以我们来说一下它的这个规则，诶，我们这个BOD啊，Bo的RA diuss，它可以什么呢？可以分别指定我们这个四个角的一个圆角啊，分别指定我们四个角的一个圆角，它这块我们说一下规则啊，一般情况下我们都用它啊，一般情况下都用它这玩意儿相对来说比较少啊，比较少四个值，四个值的话就是什么呢？第一个十是什么呢？是我们这个左上，左上然后是右上，顺时针吗？右上然后是右下，然后是左下，是这么一个规则啊，左下这么一个规则，那我们如果只有三个值呢？哎，如果只有三个值，我们来看效果。

三个值看什么效果，哎，三个值你会发现我的这个这是一个值，这是一个值，然后这两个是不是是不是一样的，也就是说我的右上和左下是一样的啊，所以如果是三个值，它是什么规则。三个值，所以它这个呀，它是找对角左三个值十是左上，然后呢，左下和这个右上，它们共享这个20个像素，诶右上和左下啊，右上和左下共享这个20个像素啊，共享20个像素，而我们这个右下用的是谁呢？用的是三个像三四啊30像素，所以三个值就是左上，然后右上左下，然后是右下，有点乱啊有点乱，当然你记不住也没关系，真正用的时候你可以试一下啊，可以试一下好两个值呢。

两个值，我们来看一下两个值就是什么呀，左上左上跟右下一样，然后右上跟左下一样啊，所以两个值，两个值，那么就是左上右下，然后右上左下这么一个范围啊，这么一个范，但是最简单的就是一个值一个值，我写一二十一个值就是全都是它啊，全都一样啊，全都一样，所以这个规则你待会儿自己稍微理一下啊，啊有时候我也记不住，那你记不住的时候，你自己去试一下啊，也比较简单，试一回你就全都记住了啊，不用着急啊，就不用刻意，呃，不建议你去刻意去记啊，不建议不建议刻意去记，那这个是我们说的它，那当然你现在我指定一个值，我只指定一个值的话，那是不是意味着还是一个圆形啊，哎，同样我在这儿也可以指定那个纵向，那个我可以干嘛呢，来一个斜盖，比如说我来一个40像素，那这个时候就变成了一个什么呀，变成了一个椭圆，哎横向呢，诶你看这种横向呢，都是20，而我们这个。

纵向的就变成了一个40啊，可以分别去指令啊，可以分别指令这么一种方式，注意它们是以斜杠相隔的啊，以斜杠相隔的还有一种就是说我们如果想什么呢？哎，如果想将我们这个元素设置为一个圆形啊，设置为一个圆形，圆形就比较简单了，我们直接就干嘛呢？最简单的方式，直接border radius border radius radi，我们直接来一个百分50，四个方向都是50%，那么它就变成了一个圆形，你只要写的是50%，无论你这个div多大，无论你这个元素多大，它都会变成一个圆形，就这么一个效果啊，这么一个效果好。关于圆角呢，我们就不多说了，不过多解释，因为这个东西其实它是可深可浅的，如果你在深处讲的话，其实还会有很多这种复杂用法，但是在这儿我就不想再过多的展开了，我们需要在我们以后用到的时候，我们再去逐渐去补充。现在先建立起这么一个。

印象啊，先建立什么印象好，那现在呢，讲到这儿的话，我们这个盒子模型的内容基本上就就这么多了啊，盒子模型的内容啊，相关的一些内容，我们都给他说的说的差不多了，然后再往下我们就要进入一些更复杂的布局，哎，比如说我们现在的布局，我们是不是还只能做竖着的，哎，那接下来我们就要开始讲我们这个如何去有使用一些更高级的布局方式啊，那这里我们还是先停一下，你先把这个刚才我们讲的这个阴影轮廓，还有圆角这三个东西过一下，然后我们就该继续往下进行了，好，我们来停一下。