CSS解读之border属性

       之前刚学习CSS的时候，对于border的属性渲染结果的理解很想当然，一开始就自然而然的认为border属性就是给容器外边加上了四条直线，这种理解一直伴随我很长的时间，不过由于一般对于border属性的运用都很普通，因此也不会出现什么问题，而所看的一些有关CSS的书上也并未做更深的讲解，所以我未能及早的察觉出来。当然，有的人会说，正是你有这样理解，所以你也不可能想到利用border属性还能做出其他的效果。是的，自己的认知会局限思维的宽度，更何况是错误的认知。所以我们在学习知识的时候要尽可能的更进一步，仅仅停留于如何运用是远远不够的。

正如开头所说，一般对于border的运用都是用来设置容器的边框，而却，一般对于容器的边框都做统一设定，比如：

    <style type="text/css">        div {            width: 50px;            height: 50px;            border: 1px solid #000;        }    </style>

       类似上述的代码我想大家应该经常用到，正因为运用都很普通，所以不可能察觉到border属性渲染的结果到底应该是怎么样的。

       将以上代码修改如下：

    <style type="text/css">        div {            width: 50px;            height: 50px;            border-top: 50px solid #ddd;            border-right: 50px solid #888;            border-bottom: 50px solid #ddd;            border-left: 50px solid #888;        }    </style>

       将border分开设定，并将border的宽度调整到50px，相邻的两边分别设定不同的颜色以区分，在浏览器里可以查看到如图1-1的效果。

图1-1

       当我看到如图1-1的时候，我非常惊讶，原来容器的border是这么组成的，开始我还以为我搞错了，后台多次验证，还在不同的浏览器下做测试，均得到了同样的结果。为了更加权威的证实这点，我又去网上查阅相关资料，由于网上对border的讲解都只是一些如何运用，因此也没有找到合理的解释。

       在图1-1中我们可以看到，四个边框并没有像我以为的是有四条直线叠加而成，那么为什么不是由四条直线组成了，假设其渲染方式是由四条直线组成的话，而却是按照顺时针的方向从上开始的话，会得到如图1-2的结果。

图1-2

       对比图1-2和图1-1可以看出，图1-2的效果一定不是我们想要的，如果边界的颜色采用CSS3.0的RGBA的话，还会存在颜色叠加的问题，因此也反证了这样渲染方式的不合理性。图1-1的渲染方式可以有效的将四边平分，从而避免了图1-2中出现的问题。但是我们可能会想，那么按照图1-1的方式，每条边是不是图1-1的梯形呢？为了验证下，修改代码如下:

    <style type="text/css">        div {            width: 50px;            height: 50px;            border-top: 50px solid #ddd;            border-right: 50px solid #888;            border-bottom: 50px solid #ddd;            border-left: 0;        }    </style>

       上面的代码主要将左边的边框宽度设为0，如果按照上述设想，那么运行结果应该是图1-1中少了一个左边的梯形。实际结果如图1-3。

图1-3

       结果又一次的并非符合我们的预期，其实我们可以继续来假设，这里就不赘述了，总之一句话，无论怎么去证实，图1-3都是最合理的结果。