CSS进阶（6）—— 浅尝盒模型中最友好的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元素，不知道看完下一章能否有所改善，菜是原罪。

不忘初心，方得始终

喜欢博主的童鞋可以扫描二维码加博主好友~ 也可以扫中间二维码入驻博主的粉丝群（708637831）~当然你也可以扫描二维码打赏并直接包养帅气的博主一枚。