巧用边框：使用三个div画出一个八卦图形

话不多说，先上图分析结构

按照正常的思路，在观看这个图形的时候，我们会想到这个图形是按照五个结构来通过颜色设置和形状设定以及定位进行安装的。
这个，我们其实只要使用三个div就可以画出这个八卦图形
首先创建三个div标签：

<div id="box">
            <div class="one"></div>
            <div class="two"></div>
</div>

分解：首先清除默认样式并且给body一个灰色背景有利于图形的观看：

           *{
                padding: 0;
                margin: 0;
            }
            body{
                background: #ccc;
            }

    1、外层圆形为一个div，左边白色部分为内容，右边黑色部分为右边框，其他边框均为0像素。

        #box{
                width: 200px;
                height: 400px;
                margin: 50px auto;
                background: #fff;
                border-right: 200px solid #000 ;
                border-radius: 50%;
                position: relative;
            }

2、设置黑球并且给白球一个黑边框，这里要利用边框的圆角属性，使得div为一个原型，并且要使用绝对定位属性使得该球可以出现在外框圆内的任意位置（当然这里我们要设置在中间的上边位置）；另外黑球白边框也是同样的道理，只是定位一个在上面一个在下面而已，top:0;/bottom:0;
(1)先设置黑白球共同样式 

#box .one,#box .two{
                width: 80px;
                height: 80px;
                border-radius: 50%;/*圆角属性，百分之五十为圆球*/
                position: absolute;
                right: -100px;/*下面会给两个球都设置边框为60px，所以可视宽高都为120+80=200；应该分一半占用到外部大球的边框，分一半占用到为外部大球的内容，所以在内容的位置左移100px即可评分黑白球；*/
            }

（2）分别设置黑白球的位置和边框颜色内容颜色

            #box .one{
                /*第一个球的上下位置不用设置，因为正常文档位置就是居顶层的*/
                border: 60px solid #fff;
                background: #000;
            }
            #box .two{
                border: 60px solid #000;
                background: #fff;
                bottom: 0;/*这里需要把球的位置设置到底部*/
            }

    至此，图形已经全部创建完毕。这个图形的制作需要对边框有比较灵活的应用思路，一个图形只包含两种不同表现区域的时候可以考虑使用一个元素的边框和内容来制作，当然边框的四边可以分别定义成不同的效果这样的话还可以定义一个具有五种表现区域的元素。在以后的学习和工作中遇到了再玩儿试试看~~