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）~固然你也能够扫描二维码打赏并直接包养帅气的博主一枚。