在很长一段时间内，border-image 属性就是个鸡肋属性，有着非常怪异的渲染机制，需要把图切成 9 块，分别填充到边框的 9 个区域。
几乎所有的 CSS 样式渲染属性，无论是渐变、圆角、盒阴影、滤镜还是混合模式，都可以从设计软件中找到对应的设置选项，唯一一个例外就是 border-image。
为什么会出现这种现象呢？
现在的小年轻肯定不知道背后的原因，容我来给大家讲讲。
在 CSS3 还没有出现的年代，那个时候，所有的彩色效果、所有的圆角效果一定是PNG小图片实现的，例如，一些渐变按钮，还有一些渐变选项卡。
当时，为了让这些图像可以适应足够多的文字，会通过特殊的切图，通过两层 HTML 标签嵌套，配合 background-position 属性实现。
比方说下图就是当年实现1-7个字符宽度自适应选项卡使用的 PNG 小图片，中间有一段镂空：
自适应选项卡 PNG 图
HTML 结构是这样的：
<a href class="outer">
<span class="inner">选项卡</span>
</a >
看起来 border-image 属性还有点用，但是大家仔细观察上面的效果图，很容易就会发现，这些所谓的自适应效果，圆角效果，特么直接 Gradient 渐变、box-shadow 盒阴影以及 border-radius 圆角就可以实现，代码简单易上手，关键是兼容性绝赞（IE10+支持），比 border-image 属性的兼容性（IE11+）还要好，资源开销也小，这就导致没有任何需要使用 border-image 的理由。
border-image 属性从此沦为了鸡肋，只在某些花里花哨的边框装饰场景还有一点使用价值（因为不得不使用图片）。
然而，故事在这里并没有结束，随着时间的流逝，从 2012 年开始，在接下来1-2年的时间内，随着某一些新特性的支持，border-image 属性迎来了新生，开始在特定的场景下绽放出别样的竞争力。
这个特性就是：
2012年7月 Firefox 和 Safari 紧随 Chrome 浏览器的步伐对 border-image 新语法支持，包括：border-image:fill 和 border-image-outset 属性；
2014年4月，Firefox 浏览器终于支持了 border-image 的渐变图像功能。
这两个新变化让 border-image 属性迎来了新生，成为了一个被远远低估的 CSS 属性。
