这节课，我们利用CSS边框知识完成一些案例。
CSS 边框在网站开发中经常被用到。比如，像这些搜索框、分隔栏、按钮边框等等，就连这个小三角都是用边框制作出来的。
http://www.qfedu.com/
https://www.mafengwo.cn/
接下来，我们就使用 CSS 边框，来制作正方形、三角形、梯形、风车等效果。
创建 010-css-case-2 文件夹，在文件夹下创建 case-border.html 文件和 case-2.css 文件。打开 html 文件，构建基础代码，引入外部样式。
添加一个 div 元素，定义 id 属性等于 square。
打开 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...