CSS进阶（6）—— 浅尝盒模型中最友好的border

你的名字 2021-09-17 01:46 309阅读 0赞

盒模型四大家族，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，他们的效果是一样的，根据前辈的测试，这样写的渲染性能最高：

最常用的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>

![20181122092455296.png][]

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

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

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

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

![20181122093824159.png][]

可以很明显的看到，上下左右四个方向是由“梯形”边框连接而成的，梯形的特点就是在上底边为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>

![20181122095054678.png][]

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

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

有兴趣的可以关注下这个系列。

[20181122092455296.png]: /images/20210813/b96b6c5f4de1415cbaa65376301cac89.png
[20181122093824159.png]: /images/20210813/5ba450011c474c8aa9037a5e5b4346cc.png
[20181122095054678.png]: /images/20210813/baf6c502d38b415990404d373e138372.png