这节课，我们利用CSS边框知识完成一些案例。

　　CSS 边框在网站开发中经常被用到。比如，像这些搜索框、分隔栏、按钮边框等等，就连这个小三角都是用边框制作出来的。

　　http://www.qfedu.com/

　　接下来，我们就使用 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;

　　}

上一篇

cookie和session的跨域怎么解决

下一篇

如何应用 CSS 装饰表单