border一点都不简单

前言

border属性在前端工作场景中有很不少的应用。相信从事前端的人有很多人已经用的是十分的66666了。对于刚入门的人来说，这个属性似乎也是相当容易。简洁的写法通俗易懂的代码方式……一切都如轻风拂过湖面，相当自然相当平滑。

既然这个属性这么容易，为啥我还要费力的来写这么一篇几乎和脱裤子放屁一样的博客呢？嘿嘿~我是抚菊而笑笑而不语啊，如果你真的以为border很简单，那么你就真的太天真了。不过话说回来，造成这种“简单”感觉存在的原因应该基于两种情况——要么是已经完全的了解了这个属性的一切，要么只是了解了皮毛而没有深入。

border基础简述

`border是设置所有边框的属性。这货从css1.0时代就已经存在，经过这么多年发展，除了新增了一些衍生属性之外变化不大。也就是说一开始这个属性的设计就是相当的成熟。这就导致了所有的浏览器都支持border。需要提一提的是IE7以及更早版本的浏览器不支持属性值inherit。而IE8需要文本类型声明!DOCTYPE。IE9开始支持inherit。

大家都知道border是个简写属性，它可以在一个声明中同时设置所有的边框属性，例如一个样式声明:border:thin solid red;就是设置细且实心的四条红色边框。很简单不是么？更有意思的是它的衍生属性，如果我要单独对每个边框来设置那么我就可以用border-top、border-right、border-bottom、border-left。写法一样也是：边框宽度+边框样式+边框颜色 。例如，border-bottom:thin dotted #555;就是定义下边框为颜色为#555的细的点状虚线。这就是单独在每个方向上设置不同的样式的边框。

除了单独设置每边框的样式之外，还能通过其他衍生属性来设置。border-style一次设置四条边框的样式、border-width一次设置四条边框的宽度、border-color一次性的设置边框的颜色。具体用法border-width:thin 2px 5px 2px。四个值按照顺序分别代表上边框宽度，右边框宽度，下边框宽度，左边框宽度。只要属性值是四个和方位有关的值都遵从顺序“上,右,下,左”的规则。具体简写规则如下：（例如：margin和padding）

ok!关于border属性，到目前为止已经有了三种写法都可以来实现添加边框了。盘点下：一种是直接同时将四个方向的边框的样式、宽度、颜色同时设置的border:× × ×;；另一种就是对每边框的样式、宽度、颜色来进行设置的border-top/right/bottom/left:× × ×;；最后就是在边框样式属性、边框颜色属性、边框宽度属性上面去设置四个方向border-style/border-width/border-color:上 右 下 左;。处理上述三种方法来设置边框之外，还有更为详细类似border-bottom-color的属性,很容易根据上面的知识就可以推断出来它能干什么，所以不再累述。并且我也写了个demo可以看下三种方式表达的区别>>>猛戳这里<<<

你可能会说这些东西都知道，呵呵没办法我需要罗嗦给那些不懂的人，大神勿喷，不过估计大神前面没看完都已经感觉索然无味早就点叉叉跑了。其实对这三种书写方式的理解加深有助于延展拓宽我们的思路，很多技巧或者是技术都是从这里“发芽的”。例如：纯CSS实现三角形、梯形或其他多边形。

border作三角形

这个技术至少出现在2010年，因为我是在2010年看到过。作为一种“奇技淫巧”的小窍门，对于很多人来说已经都不是个事了，可我当时理解它着实费了一份工夫，因为那个时候我还没有踏入前端的大门并且对CSS基础知识相当薄弱。在条件很不好的情况下我还是用了几个小时候时间彻底弄通这项技术的原理。可能你会问，这玩意能干啥？我所能回答的就是两点：1,节省了一张图。2,装逼卖萌！哈哈

以下四个图形是由CSS生成

哇哦！很神奇不是么？但是我觉得有人可能会觉得这个东西很无聊，一张图片就能实现的为啥要敲代码呢？我什么都不做评价，只讲述原理……

为什么用border属性可以实现三角形或不规则图形呢，原理其实很简单。因为border属性生成的边框不是四条直线，就这么简单……估计看到这里还有些迷茫。深入解释下，因为边框是覆盖元素边缘的，而元素都是会占据一定空间，如果边框是四条直线的话，那么边框的长度和高度就不能完全正确的显示表达。看下图

错误的border理解图形

其实把border-width的值给设置大一些，就能看出来边框的“秘密”了。

#triangle-5 {
    width: 0;
    border-top: 50px solid violet;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid green;
    margin: 5px;
}
 
#triangle-6 {
    width: 200px;
    height:120px;
    border-top: 50px solid violet;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid green;
    margin: 5px;
}

看到了吧，这才是border最真实的“秘密”,也是用CSS实现三角形或多边形的技术原理。可能有人看的一脸懵逼，这怎么实现啊？这就是基础知识不牢靠的结果啊，对照上面的图形只需要将不需要的边的颜色给设置成transparent（透明）那么剩下来有颜色的地方不就是我们需要的图形了吗？切忌不能设置成白色，要是背景色不是白色就只能呵呵了，所以设置为透明才是最优方案。小三角形的例子我就不详细列举了，配合position定位能应用在按钮、导航、列表等场景。我举个较综合的例子：

这个图片效果运用了一次border属性制作多边形，一次border属性制作三角形。并配合box-shadow、position、transform以及:after、:before属性，如果不了解这两个伪类的可以出门右转看另一片文章《好用的伪类:before和:after》。

这个例子如果多来上几张图片并且让图片旋转的角度变成随机再来上一点点JS或者jquery代码，就能实现一个很炫的相册效果。如果配上transition或者animation实现动态边框的效果。那么这些就可以组成一个个人相册的前端核心代码了。想看黑丝妹子DEMO的源码可以>>>猛戳这里<<<。随便来上几句代码来说明一下吧。可以将鼠标移动到图片上看看效果。

本来打算借着border属性来详细说一说border-image的，也就是说最开始这篇文章压轴项目的是border-image，所以才有前面第一段的那些话以及这个扎眼的文章题目。想这样打住不写border-image的话，整个文章的侧重点就变成了border制作三角形了，与题目契合度不高。后来想一想还是算了。原因有三：

• border-image出现在CSS3，浏览器兼容性是个大问题，IE11之前的版本都不支持它。
• border-image属性参数较多，能写的比较让人明白的话那是要相当费篇幅的。
• 写了好长时间了，累了！写东西这玩意一开始觉得不会太累，等写了才知道——累就一个字。

综上所述，就是我到此打住的原因，不过我计划新开一篇文章中详细说明border-image，敬请期待……今天就到这里吧~bye