我们所认识的border就是一件容器的边框，并没有太多的意义。从一开始的练习作业“五环之歌”我们渐渐习惯用border显示容器所占区域，更能直观看到。或者我们用border美化内容。这就是我们常用的border。也渐渐的习惯想都不想的就写成border:1px red solid 来一个1像素红色的边框。

后来在css课程结束后，我一直很迷惑，我们除了会做老师留给的作业，还能做些什么？一天看到有位同学在用css画哆啦A梦，有如醍醐灌顶。但由于自己的能力有限，现在只能做一些简单的图，如：

这个图的制作就显示了border-width的经典应用，html结构十分简单，一个div（起个名字box）包裹两个div（起名字left,right）。如何把box做成一个上半圆白色下半圆黑色是一个难点。这就要用到border-width的四个方向的宽度设置了。我们把box的的大小设置为width:96px;
height:48px;好，接下来设置边框，border:#000 solid;给他一个黑色边框，宽度，border-width:2px 2px 50px 2px;让底边的边框宽度为50px，我们可以得到一个上白下黑的类似正方形的图形。好，接下来border-radius:50%;这样就可以的得到一个上半圆白色，下半圆黑色的图形了。

接下来就好做多了，给box一个相对的定位，left是一个宽高12px，边框为18像素的里白外黑的圆环，绝对定位top:50%,left:0;right是一个宽高12px，边框为18像素的里黑外白的圆环，绝对定位top:50%,left:50%;然后看看太极图是不是就呈现在你的面前了！！！！