背景
源于昨天跟佬友讨论的一个需求。
前端开发中，我们可能会遇到一些背景相关的需求，例如使用一张类似奖状的背景图，但是要求奖状中间部分适配文本内容高度而需要无限拉伸，类似下图：
初步设想
拿到这个需求，想到的就是安卓的点九图（不知道现在还用不用 
），想到的解决办法就2个：
- UI切图分为上、中、下 三个，中间部分自动拉伸
- 不切图，利用
clip-path来达到相同的三部分效果
还有一个例外的想法，老切图仔知道的 滑动门 方案，但是谁还用传统方案啊
还有就是使用第三方库 smart-scale 来达成，但这么点个东西去加载一个三方库，emmm…
以上方案虽然可以达到效果，但是得将整体分为三块，敲代码有点麻烦，也不优雅，于是我又想起来了一个 “新” 的方案，使用 border-image 来模拟背景。
border-image-slice
传统边框中，我们都知道分为四部分：上下左右。但是，我们实际可以用 border-image-slice 将整个边框资源 border-image-source 切为9个部分。
- 区域 1-4 为角区域（corner region）。每一个都被用于组成最终边框图像的四个角。
- 区域 5-8 边区域（edge region）。在最终的边框图像中重复、缩放或修改它们以匹配元素的大小。
- 区域 9 为中心区域（middle region）。它在默认情况下会被丢弃，但如果设置了关键字
fill，则会将其用作元素的背景图像。
这就意味着，我们可以自由的选择切片大小来达到目的。
为了简便，我们让左右直接从中间分割，这样就没有了中间区域，也就不需要使用 fill 关键字填充，剩余部分去除四个角，另外两区域就是我们需要拉伸的背景区域了。在 border-image-repeat 中 使用 stretch 。
border-image-source: url($pic);
border-image-slice: 400 50%;
border-image-repeat: stretch;
// 简写
border-image:url($pic) 400 50% stretch;
border-image-slice 里面值的数量所代表的含义与 margin padding 相同：
- 一个值：
上/下/左/右 - 两个值：
上/下左/右 - 三个值：上
左/右下 - 四个值：上 右 下 左
然后，没了，就这样，简单优雅地实现。
关于border-image-repeat 其它取值的效果，可以自行探讨，能做出很多有趣的效果，根据需求选择即可。
只要不是老古董，兼容性没啥问题，大胆用！
由于只是初步介绍一下这个特性及其部分使用，并未作过于详细的介绍，感兴趣的可以自己去MDN或是W3了解更多！
贴一下写的DEMO
谢 
