css3里面的过渡属性（CSS3中的border-image属性）
css3里面的过渡属性（CSS3中的border-image属性）stretch(默认值)图片边框向内偏移的距离。格式：border-image-slice：top right bottom left。分别指切割背景图片的四条线距离上右下左的距离。 如下图所示：border-image属性分析边框背景图片。格式为：url(“…”)。border-image-slice
border-image是CSS3的一个属性，今天就来分析下该属性的一些特征，方便大家以后在使用上遇到难题！
border-image是将简单的工作复杂化，当学习完该属性以后，发现该属性的运用能够大大节省编码时间和效率，总结一下，大致适用于以下两个场景：
-
元素边框不规则的情况。这时候，就需要用设计图作为边框背景，border-image与background-image相比，好处是更具灵活性，可以用代码控制边框背景的拉伸和重复，因而能够创造出更多样的效果
-
按钮宽高不确定的情况。用border-image来制作按钮，可以用同一张背景图，制造出各种宽高的按钮。
border-image属性分析
边框背景图片。格式为：url(“…”)。
border-image-slice
图片边框向内偏移的距离。格式：border-image-slice：top right bottom left。分别指切割背景图片的四条线距离上右下左的距离。 如下图所示：
stretch(默认值)
效果如图：
可以看到每个区域都被横向和纵向拉伸了
repeat
效果如图：
可以看到背景在以原形状等比例缩放以后，持续平铺，容易出现断层。
round
效果如图：
同样是重复平铺，但是round会处理得更平滑，不会出现断层情况，因此round通常比repeat更常用。
