CSS3中的border-image详解

border-image属性的简介

    在之前的CSS中大家已经接触到了background，background有三个参数，分别是图片的链接，背景的位置以及背景的重复方式，这里就不一一展开了，今天的主角是border-image，它和background有一样的参数，但是具体的用法却不相同，下面就来一一介绍。

border-image属性的参数介绍

• 图片链接（border-image-source）

在background中用的是url，这里也可以用url（）进行调用，可以用相对地址和绝对地址，当然，不要也是可以的，那就是border-image:none;

• 图片的裁剪位置（border-image-slice）

这个参数是没有单位的，或者说是默认单位就是像素(px)，并且支持百分比值，这里的位置可以是1到4个参数，和margin的理解方式一样，分别表示上右下左，即第一个参数表示距离上面多少，第二个表示距离右边多少，依此类推，在对边框进行四刀切的时候，会分成九块，就是形成所谓的九宫格。如下图所示

• 图片的重复方式(border-image-repeat)

这里的重复性要比background的复杂，不是简单的水平重复，垂直重复，而是三种方式，除了repeat（重复）之外，还有round（平铺），stretch（拉伸），其中拉伸是默认值，从字面上看不太出来这三个的区别，看一下下面的例子就能够明白了。

     如上图，在进行任何一种重复方式时，2,4,6,8这4个边角的位置是不发生变化的，发生变化的是7,9,3,1以及中间部分5，也就是说这三种变化的区别就是主要体现在发生变化的区域

1.stretch（拉伸）默认值

border-image:url() 27 stretch（水平和垂直方向都是拉伸）

就像上面所说的那样，边角的不会发生变化，水平的部分就是水平拉伸，垂直部分就是垂直拉伸，很明显

2.round（平铺）

border-image:url() 27 round（水平和垂直都是平铺）

和上图进行对比会发现，这就是重复，而且重复的还是除了边角之外的部分，但是不知道大家有没有发现，这个重复得很整齐，也就是说这个并没有多出一部分不能完好的放置，而是每一个都很完整，这就是平铺和重复的区别了，再往下看就知道了。

3.repeat（重复）

border-image:url() 27 repeat（水平和垂直都是重复）

这个地方就出现了上面说的那个问题，在重复的时候会发生有重叠的情况，也就是说不是每一个都完好。那为什么平铺可以做到呢？这是因为平铺会把每一个方块都等比例的缩小，使他们刚好可以完好的放置在中间，不会产生重叠，这也是平铺和重复的区别。

好了，border-image属性的参数都讲完了，下面来做一个小的总结：

1.border-image的参数有三个，分别是图片链接，裁剪位置，重复方式

2.裁剪位置是按照上右下左顺时针的方式进行裁剪，即离上面多少，离右边多少，离下面多少，离左边多少

3.在进行变化的时候，边角是不发生变化的

4.第三个参数分为水平和垂直的变化，当只有一个参数时，表示水平和垂直的变化相同，round和repeat重复方式的区别在于ropund会将要重复的内容进行等比例的缩放来实现不重叠的效果，而repeat就是单纯的重复，可能会产生重叠的效果（注意：这里说的是可能会，因为如果裁剪的大小刚好的话就不会发生重叠的效果，此时round和repeat的效果相同）

PS:

这篇文章参考自张鑫旭大神的博客，我只是大致的总结一下并且只选取了前面最基础的部分，如果觉得没有看懂的可以直接去大神的博客再次理解，这里附上大神这篇文章的地址，点开大神博客。