共计 2570 个字符，预计需要花费 7 分钟才能阅读完成。
这节课，咱们利用 CSS 边框常识实现一些案例。
CSS 边框在网站开发中常常被用到。比方，像这些搜寻框、分隔栏、按钮边框等等，就连这个小三角都是用边框制作进去的。
http://news.baidu.com/
http://www.qfedu.com/
https://www.mafengwo.cn/
接下来，咱们就应用 CSS 边框，来制作正方形、三角形、梯形、风车等成果。
创立 010-css-case-2 文件夹，在文件夹下创立 case-border.html 文件和 case-2.css 文件。关上 html 文件，构建根底代码，引入内部款式。
增加一个 div 元素，定义 id 属性等于 square。
<div id=”square”></div>
关上 css 文件，定义 #square 选择器，申明款式：width: 150px，height: 150px，border-top: 50px solid red，border-right: 50px solid yellow，border-bottom: 50px solid blue，border-left: 50px solid green。
在浏览器中查看成果，咱们发现，每条边的交接处，边框各占一半。
关上浏览器开发者工具，在 Elements 页签下，鼠标滑到 div 元素上，咱们发现，这个元素的显示的宽高为 250。在 CSS 中，给 div 设置的宽度是 150，加上两个边框的宽度恰好是 250。
因而能够得出结论：款式中给元素设置的宽高，是不蕴含该元素边框宽高的，它只蕴含元素内容的宽高。
如果这个 div 在边框宽度不变的状况下，膨胀内容区域，直到内容全副隐没，就是咱们要的成果了。
要实现这个成果，只有把 div 里款式的 width 和 height 属性值设置为 0 就能够了。
咱们看，成果实现了！
有这个作为根底，实现三角形也容易了。再增加一个 div 元素，定义 id 属性等于 triangle。
再申明一个 #triangle 选择器，把正方形的款式代码拷贝过去，保留上边框款式不变，把其余边的色彩设置为 transparent。
这样，三角形就做好了。
当然，这三行代码能够简化为 border: 50px solid transparent。
诶，三角形怎么隐没了？原来，前面的这句款式将全副边框设置为通明，把下面那句款式给笼罩了。咱们只须要把他们程序颠倒一下即可。此时，对于顶部的边框，又从新定义了款式，把上边定义的顶部边框款式又笼罩回来了。
三角形又呈现了！
这个梯形该如何实现呢？其实也不难。再增加一个 div 元素，定义 id 属性等于 trapezium。
再申明一个 #trapezium 选择器，再次把正方形的款式代码拷贝过去，把顶边款式正文掉，左边框色彩设置为通明，左边框色彩设置为蓝色。
功败垂成，梯形就做好了！
再进步点难度，制作一个风车成果。剖析一下，这个风车实际上是由四个三角形拼合而成的。
再创立一个 div，定义属性 id 等于 windmills。在这个 div 里编写 emmet 命令：div 中括号 class 等于 box$ 乘以 4 (div[class=box$]*4)，回车，四个 div 创立好了。
定义选择器 #windmills，给内部的 div 申明款式：width: 200px，height: 200px，border: 2px solid gray。
定义 #windmills .box1 选择器，申明款式：width: 0，height: 0，border: 50px solid transparent，border-bottom: 50px solid red。
将这组款式拷贝三份，批改选择器为 box2，box3，box4。咱们给四个风车叶编一下号。
第一个是底部的三角，显示的边框应该是 border-bottom。以此类推，第二个是左侧的三角，第三个是右侧的三角，第四个是上边的三角。
很显然，当初还不是风车的成果。仔细观察，四个 div 各独占一行，得须要让他们横向排列才行。
定义一个新的选择器 #windmills div，给四个 div 申明款式：float: left。
很神奇，风车的成果实现了！
无关浮动的弱小性能，咱们在后续的课程里还会具体介绍。这里先把它的性能了解成，能够使容器左右排列即可。
回到款式，咱们发现这三句款式反复写了四遍，齐全能够把他们放到 #windmills div 这个选择器里。
代码参考：
#square {
width: 0px;
height: 0px;
border-top: 50px solid red;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
border-left: 50px solid green;
}
#triangle {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top: 50px solid red;
/* border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent; */
}
#trapezium {
width: 0px;
height: 0px;
/* border-top: 50px solid red; */
border-right: 50px solid blue;
border-bottom: 50px solid blue;
border-left: 50px solid transparent;
}
#windmills {
width: 200px;
height: 200px;
border: 2px solid gray;
}
#windmills div {
float: left;
width: 0;
height: 0;
border: 50px solid transparent;
}
#windmills .box1 {border-bottom: 50px solid red;}
#windmills .box2 {border-left: 50px solid red;}
#windmills .box3 {border-right: 50px solid red;}
#windmills .box4 {border-top: 50px solid red;}
文章配套视频链接：https://www.bilibili.com/vide…
