border-color的学习

在盒模型中，我们最常见的就是用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所包覆图形对角线所划分的四个区域。