在盒模型中，我们最常见的就是用border:1px solid #000;来实现边框，其实border-color作为border的一部分也同时可以在四个方向上设置不同的值。
下面分有无content这两种情况来讨论：
- 无content
1.width:0px;height:0px;border:100px solid;border-color:#00f ;
结果为一个单色正方形。
2.width:0px;height:0px;border:100px solid;border-color:#00f #0f0 ;
看来第一个值为上下border,第二个值为左右border。
3.width:0px;height:0px;border:100px solid;border-color:#00f #0f0 #f00 ;
4.
width:0px;height:0px;border:100px solid;border-color:#00f #0f0 #f00 #ff0 ;
完全遵循padding,margin这样的简写原则：
1为全，2为上下、左右，3为上、下、左右，4为以上为始顺时针转一圈。
- 有content
1.width:100px;height:100px;border:100px solid;border-color:#00f ;
变成一个环装的方形，显然中间白色部分为100X100，而整体应为300X300。
2.width:100px;height:100px;border:100px solid;border-color:#00f #0f0;
3.width:100px;height:100px;border:100px solid;border-color:#00f #0f0 #f00;
4.width:100px;height:100px;border:100px solid;border-color:#00f #0f0 #f00 #ff0;
由图可知，border-color的分界线为border所包覆图形对角线所划分的四个区域。
