重学css（5）浅尝盒模型中最友好的border

盒模型四大家族，content，padding，margin，没一个省心的，终于遇到了最友好的border属性。border的友好从名字就可以看出来，设计者设计此属性的初衷就是给元素弄个"边框"。在空间计算上也没那么多的破事儿，是多少，就是多少。和其他三兄弟不同，border连百分比值计算的事儿都省了，这或许跟边框的粗细与元素大小没有必然联系有关，比如一个长宽200的盒子，和一个长宽400的盒子，他们的border都是1px，不会因为盒子变大了，边框也要跟着变粗，这也不符合我们的审美。下面开始探究border的属性以及一些实用的技巧。

1.了解各种border-style类型

常用的border-style有四种类型：none，solid，dashed和dotted。

border-style的默认值是none，也就是不参与计算，这有点类似于display:none，因此如果你单纯设置border-width和border-color是不会有边框显示的。如果你想让你的边框显示，请务必设置border-style属性不为none。

通常none属性用于重置某一条边框样式，当然我们也可以设置某一条border-width：0，他们的效果是一样的，根据前辈的测试，这样写的渲染性能最高：

<style>
div{
 border:1px solid;
 border-bottom:0 none;
}
</style>

最常用的border-style是solid属性，这个属性不过多介绍，就是实线属性。

除了实线，还有两种虚线属性，分别是dashed（虚线）和dotted（虚点）。在这里作者只介绍了这两种属性在不同浏览器下的不同表现，没有涉及到“虚线间隔”的问题，事实上如果需要自定义的虚线间隔，需要用到border-image或svg，这都不属于本书讨论的范围，因此这两种虚线也不过多讨论。

除了实线和虚线，border-style还有几种不常见的属性，分别是double(双线边框)，inset(内凹)，outset(外凹)，后面两个几乎已经不用了，双线边框在使用的时候需注意border-width>=3px才能显示出双线边框的效果，你只需要记住border-widht = 双线 + 双线间隔就知道为什么border-width要>3这个样式才能生效了。

2.border-color的默认值

如果不设置border-color的话，border-color会取color色值作为自己的默认值，写个测试验证一下

<div class="filePost"></div>
<style>
body{
    margin: 0;
}

.filePost {
    display: inline-block;
    width: 76px; height: 76px;
    color: #ccc;
    border: 2px dashed;
    position: relative;
}
.filePost:hover {
    color: #34538b;
}
.filePost::before, .filePost::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
}
.filePost::before {
    width: 20px;
    border-top: 4px solid;
    margin: -2px 0 0 -10px;
}
.filePost::after {
    height: 20px;
    border-left: 4px solid;
    margin: -10px 0 0 -2px;
}
</style>

效果如下图所示：

在鼠标移入的时候，我只改变了color的颜色就可以让border的颜色跟着变化，不需要去修改before，after伪类的border-color，非常好用的特性。

3.用border的转角特性构建基本图形

border属性可以实现兼容性非常好的三角图形效果，究其原因，发现竟然是border-style中不起眼的inset/outset的转角特性被solid沿用导致的。下面来画一个四色边框看看border的“转角特性”。

<div class="colors"></div>
<style>
.colors{
    width: 200px;
    height: 200px;
    border: 30px solid;
    border-color: red yellow green blue;
}
</style>

由于markdown编辑器支持标签语言，因此我们可以直接预览最终效果如下（小提示：你可以通过浏览器直接检查下面的元素看到CSS样式）

可以很明显的看到，上下左右四个方向是由“梯形”边框连接而成的，梯形的特点就是在上底边为0的时候就可以转化成三角形，我们把长宽都设为0，就可以利用border转角的特性生成四个三角形，此时我们再用border-color:transpaorent方式隐藏部分border，就可以实现许多实用的图形。下面我提供一种利用梯形实现圆角效果的例子，当然现在你可以用border-radius，然鹅css2似乎并不支持这个属性。

<div class="radius">模拟圆角</div>
<style>
.radius {
    display: inline-block;
    line-height: 36px;
    padding: 0 40px;
    color: #fff;
    background-color: #cd0000;
    position: relative;
}
.radius:before,
.radius:after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    border-style: solid;
}
.radius:before {
    top: -2px;
    border-width: 0 2px 2px;
    border-color: transparent transparent #cd0000;
}
.radius:after {
    bottom: -2px;
    border-width: 2px 2px 0;
    border-color: #cc0000 transparent transparent;
}
</style>

除了上面的例子之外，还有很常用的用border实现三角形之类的，这里就不多展开了，只要你想得到，border能做的事情还有很多很多。

盒模型四大家族到本章告一段落了，下一章是关于内联元素的内容，自己在开发的时候非常“讨厌”使用inline元素，不知道看完下一章能否有所改善，菜是原罪。

最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。