简单的来介绍一下border-image的参数，让大家在脑海中有下初步的概念
1、none:是border-image的默认值，如果取值为none时，表示边框无背景图片；
2、<image>：设置border-image的背景图片，这个跟background-image一样，使用绝对或相对的url地址，来指定背景图片；
3、<number>：number是一个数值，用来设置边框的宽度，其单位是px，其实就像border-width一样取值，可以使用1~4个值，其具体表示四个方位的值，大家可以参考border-width的设置方式；
4、<percntage>：percntage也是用来设置边框的宽度，跟number不同之处是，其使用的是百分比值来设置边框宽度；
5、stretch,repeat,round:他们是用来设置边框背景图片的铺放方式，类似于background-position，其中stretch是拉伸，repeat是重复，round是平铺，stretch为默认值。
大家看到上面的参数介绍后一定会想起background-image这个属性。是的，这两者之间确实有一些类似之处，其中包括对图片的引用和排列方式都是一样的原理。为了更好的理解,先暂时把border-image在语法的表达形式进行属性的分解来阐述（实际应用中是不能分解的），这样就可以把border-image分解为：
1、引入图片：border-image-source
2、切割引入的图片：border-image-slice；:
3、边框的宽度：border-image-width；
4、图片的排列方式：border-image-repeat。
下面就详细的来介绍上面的四个属性的使用方法和其各自的特性，从而更好的深化border-image的相关知识点。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-border-image © w3cplus.com
项目需要做个环形的导航排列，网上找到一篇详细介绍原理的文章 javascript-按圆形排列DIV元素(一)---- 分析 ，然后尝试着把它实现了，效果图如下：
源码分享给大家哦，拿走不谢O(∩_∩)O
vue版本的根据项目需求做了些略微的修改
