跟高老师学习Web前端之40.

复古

       受雾霾天气的影响，往来太原的很多货车都堵在石家庄了。沟通、应急预备电话打了很多，客户不能断货，厂商不能欠货，一帮克服、业务忙疯了，实属无奈啊！雾霾导致车辆限号限行，很多地区还货车禁行，就连省内的配送也无法正常进行，原本的配送计划改了又改。祈求雾霾天气快点过去吧！

       今天起开始学习边框的风格---border-style。

(一)、边框风格

代码1

代码2

页面展示

      特别说明： nth-child表示选择器类型，后面会详细介绍，今天为了学习不同风格的边框，高老师先简单讲解了下。因浏览器解析代码时是从上到下解析，后一个代码的属性会覆盖前一个，因此需要用到nth-child，使得浏览器解析代码时能够从上到下依次展示。

       属性值中outset表示凸边，inset表示凹边，ridge表示凸槽，groove表示凹槽，double表示双线，solid表示实线，dashed表示虚线，dotted表示点，hidden表示边框隐藏，none表示没有边框。

       （二）、上一课我学习了边框的宽度，border-width：1px  4px  6px  10px  代表边框上、右、下、左的宽度，在边框风格设置中，border-style后的值属性与该属性的表示方法一致。如下所示：

代码书写

页面展示

      （三）、若不使用nth-child选择器，由于浏览器解析代码时后一个代码会覆盖前一个代码，因此页面显示均为最后一个属性值所展示的属性。如下所示：

代码1

代码2

页面展示

       以上就是今天所学内容,感谢高老师指导！