这次年货，为了增添气氛，很多地方都用了边框，由于边框高度的不固定，给构建着实带了不小的麻烦。

通常我们处理边框的方法，无非以下两种方案：

1.切整张图片，做背景。

2.切上中下，进行拼接处理。

但是遇到，边框多种样式的时候，我可能就需要支招，切得手软，为了解决这些问题，我们尝试了border-image。

使用border-image，我们无非弄明白以下几个属性就能使用了：

border-image-source	用在边框的图片的路径。	border-image-slice	图片边框向内偏移。	border-image-width	图片边框的宽度。	border-image-outset	边框图像区域超出边框的量。	border-image-repeat	图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。

但是在使用过程中，可能会遇到两个这样的问题：

1.border-image使用中会产生多余的边框（手q中，在一些低端的andirod中）。

2.border-image-repeat的属性值，repeat 和 round 如何选择区分。

针对这两个问题，经过一些尝试，尝试发现：

1.border-image使用中会产生多余的边框，是由于边框图片边缘没有预留一定的空间导致的，这里建议预留1px，例图：

边框易产生多余的边框（低端机）

边框不会产生多余的边框

2.repeat 和 round 如何选择区分，round会压缩（或伸展）图片大小使其正好在区域内显示，而repeat是不管三七二十一直接重复的，而且是居中重复，多数情况建议大家可以用round，repeat会导致叠加现象，下面同种情况下实现的效果：

这个是w3cschool里面的例子，我加了round，repeat 比对：

      
       在这里，图片铺满整个边框。
      
      
       在这里，图片被拉伸以填充该区域。
      
这是我们使用的图片：

　　

效果：

很显然，repeat出现了，叠加现象，对于我们构建来说，肯定不是特别好的，所以建议用round。