CSS3 border-image详解、应用及jQuery插件
作者：佚名
字体：[ ] 来源：互联网 时间：08-29 17:07:01
border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅Firefox3.5，chrome浏览器，Safari3+支持border-image。
一、border-image的兼容性border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅Firefox3.5，chrome浏览器，Safari3+支持border-image。所以，就本文而言，IE浏览器可以回家休息了，Firefox3及其以下以及Opera浏览器也可以休息去看《阿凡达》了。所以，本文提供的一些demo页面，要在Firefox3.5+，chrome或Safari3+浏览器下才可以看到效果。
二、熟悉border-image的一些特性我们可能对于CSS2中的background属性比较熟悉，例如：background:url(xx.jpg) 27px no-指代的是图片(url(xx.jpg))，位置(27px)，重复性(no-repeat)。
border-image于此类似，border-image包括图片，剪裁位置（与background位置一样，也是数值，也支持百分值），重复性。例如：border-image:url(border.png) 27，指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)。试着对比background，这有助于border-image属性的记忆。
具体描述border-image的参数border-image的参数就是上面提到的三个：图片，剪裁位置，重复性。1、图片(border-image-source)与CSS2中background-image属性一样，border-image的背景图使用url()调用，图片可以是相对路径或是绝对路径，也可以不使用图片，即border-image:
2、图片剪裁位置(border-image-slice)此参数特点比较鲜明：1、没有单位，专指像素。这类似于flash的as脚本，舞台高宽，影片剪辑大小，位移直接就是一个数值，没有单位，因为默认单位就是像素(px)了。例如：border-image:url(border.png) 27这里的27专指27像素。
2、支持百分比值，百分比值大小事相对于边框图片而言，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。
3、剪裁特性。如果您对CSS中clip属性(clip:rect(auto, auto, auto, auto))比较了解，则这里理解就会轻松些。clip可以说是CSS中一个明目张胆的剪裁属性，而此处的属性虽然表意上不是剪裁，但是在border-image效果的实现上来说，就好像是个剪裁工具，把边框图片四分五裂，再重新安置，变形。其有1~4个参数，其方位规则符合CSS普遍的方位规则（与margin，padding等或border-width一致），上右下左顺时针，再赋予剪裁的含义，举个简单的例子，前面提到，支持百分比宽度，所以这里&30% 35% 40% 30%的&示意可以用下图表示：
看图说话就是，离图片上部30%的地方剪裁一下，在右边35%的地方剪裁一下，在离底部40%的地方裁剪一下，在距左边30%的地方也剪裁一下。于是总共对图片进行了&四刀切&，形成了九个分离的区域，这就是九宫格，这是下面深入讲解border-image的基础。
3、重复性(border-image-repeat)这里的重复性有别于background的背景重复，差别较大。background图片就是重复，不重复，水平重复，垂直重复，总之就是围绕repeat（重复）这个词打转，一家独大。而对于border-image，可谓是三足鼎立，repeat（重复）只是其中之一，其余两个是round（平铺）和stretch（拉伸）。其中，stretch是默认值。
参数0~2个，0则使用默认值 & stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40%；1则表示水平方向及垂直方向均使用此参数；2个参数的话则第一个参数表水平方向，第二个参数表示垂直方向。例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40%表示水平方向round（平铺），垂直方向repeat（重复），至于何为平铺何为重复下面会深入讲解。
三、深入理解border-image的宽度和展示方式分开理解border-image的宽度或是展示方式其实不太难的，关键是这两者结合使用时候的含义，需要花一定的功夫的理解。
帮助理解的九宫格模型何为九宫格？为什么我们需要九宫格帮助理解？&九宫格&是我国书法史上临帖写仿的一种界格，又叫&九方格&，即在纸上画出若干大方框，再于每个方框内分出九个小方格，以便对照法帖范字的笔画部位进行练字。在本文，&九宫格&就专指由九个方格形成的矩形布局，例如左图就是一个很简单的数字九宫格。
border-image的数值参数其实是用来剪裁边框图片的，正好&哗哗四刀&切出了个九宫格的模型，所以，有意或无意，巧合还是必然，我们需要用到九宫格模型帮助我们理解border-image的绘制原理。下面这张图是本文非常重要的基本的示意图，因为这是张具有代表性的九宫格图案(27*3)*(27*3)。&&&&&&&&&&
这张图能够帮助我们更好的理解border-image的剪裁及绘制的原理。
边框将border-image分成了九部分：border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image以及中间的内容区域。假设现在边框的宽度是27像素，则上面所说的九部分正如下图所表示的（放大400%）：
左图中，橙红色的四个边角的菱形区域称为&角边框图片&，在border-image中，角边框图片是没有任何展示效果的，不会平铺，不会重复，也不会拉伸，有点类似于视觉中盲点的意思。
而对边的四个橙黄色区域属于展示效果的作用区（也是边框宽度计算剩余区），上下区域即border-top-image和border-bottom-image区域受到展示效果属性的第一个参数&&水平方向效果影响：如果为repeat，则此区域图片会水平重复，如果是round，则此框框内的图片会水平平铺，如果是stretch，则此矩形域中的图片就会被水平拉伸。（下部分的实例会做具体演示）左右区域只有垂直方向上的效果，与上下区域效果对应，不多说。
中间的区域（左图的空白格）受到全部参数的作用，在水平和垂直两个维度上都有展示效果（平铺、拉伸等）。
这里，插一点内容，讲一下round（平铺），repeat（重复），stretch（拉伸）所具体指代的效果。这三个特性其实大家应该都比较熟悉。看下图：
在windows系统桌面壁纸显示方式选项中就有&拉伸&和&平铺&，这两个效果与border中&拉伸&和&平铺&效果一致。只是可能在理解&平铺&和&重复&的区别上有点丈二的和尚&&摸不着头脑。记住这么一点：平铺可能会改变了原图片显示的大小，重复不改变图片显示的大小。
这么比方吧，您从万科地产买了个99.5m*99.5m的毛坯房，地面要贴瓷砖，都是1m*1m的正方形瓷砖。如果是&平铺&，对不起，这1m边长的瓷砖不行，要处理！怎么处理法？很简单，每个瓷砖压成0.995m*0.995m的，这样就可以了，所以，平铺就是以完整的单元铺满整个区域。如果是重复，就直接把这1m*1m的瓷砖从一个角落一个一个的放置，放到头放不下了怎么办？直接把瓷砖从中间&咔&掉，于是最后会在房子的边角看到很多半截的瓷砖。下面就是一个个的实例演示了，您可以通过下面的实例效果中加深理解。
帮助理解的一些实例下面的实例代码对应的demo页面要在Firefox3.5、chrome或Safari3+浏览器下才可以看到效果。所使用的背景图片就是前面提到的九宫格代表图（8菱形 & 81px*81px），名称为border.png。
1、27像素剪裁宽高(1/3边框图片宽高)在1em边框宽度下的默认显示CSS代码：代码如下: .border_image{ width:400 height:100 -moz-border-image:url(../image/border.png) 27; -webkit-border-image:url(../image/border.png) 27; border:double orange 1 }
您可以狠狠地点击这里：
效果分析：这里没有显示方式的参数，正如上面所说的，0参数即使用默认的stretch拉伸，所以从图上可以看到四个对边的拉伸效果。上面还提到，四个对角是不受重复方式影响，该什么样子还是什么样子，无拉伸平铺，本面目示人。见下图的标注（放大200%）。
这个九宫格各区域展示方式的标注图在border-image中是通用的，无论border-image的代码如何改变，其显示效果的原理核心就是左边这张九宫标注图，亘古不变的是四个边角，这四个边角就是四条边框的重叠区域，不会有拉伸或是重复的展现效果。有变化的就是四边区域和中心区域，这几个区域中的水平和垂直属性也是稳如泰山，屹立不变的，改变的就只是&拉伸&而已，变成重复啦或是平铺。
由于其通用性，所以此显示原理标注图在下面就不一一展示了，您找到对应的位置，修改&拉伸&为&平铺&或&重复&即可，其他都不用改变。
2、27像素剪裁在1em边框宽度下round（平铺）显示效果CSS代码：代码如下: .border_image{ width:400 height:100 -moz-border-image:url(../image/border.png) 27 -webkit-border-image:url(../image/border.png) 27 border:double orange 1 }
您可以狠狠地点击这里：
3、27像素剪裁在1em边框宽度下repeat（重复）效果CSS代码：代码如下: .border_image{ width:400 height:100 -moz-border-image:url(../image/border.png) 27 -webkit-border-image:url(../image/border.png) 27 border:double orange 1 }
您可以狠狠地点击这里：
上图我圈了四个边角，不难发现，这一个边角处的菱形都是被截掉的。这就是repeat的效果，还记得上面的毛坯房的例子吗？round会压缩（或伸展）图片大小使其正好在区域内显示，而repeat是不管三七二十一直接重复的，而且是居中重复，repeat从中间开始（这是我的观察，可能不准确）。
这里还有一点需要注意：在webkit核心的浏览器下这个round属性和repeat属性似乎没有没有区分，显示的效果是一样的，所以您在chrome浏览器或是Safari浏览器下看demo2和demo3的效果可能是一样的。Firefox3.5下可以准确区分这两个参数。
4、上实例样式缩写上面的实例还可以进一步缩写。CSS如下：代码如下: .border_image{ width:400 height:100 -moz-border-image:url(../image/border.png) 27/1 -webkit-border-image:url(../image/border.png) 27/1 border:double orange 1 }
实现的效果是一样的。您可以狠狠地点击这里：
border-image绘制原理简述我是这样理解的：共存在两个九宫格，一个是边框图片，还有一个就是边框本身，九个方位关系一一对应。边框本身的特性让其变成了一个九宫格，四条边框交错，加上其围住的区域，正好形成一个九宫格。边框图片则是通过图片剪裁实现了九宫格。这是理解绘制原理的基础。
1、调用边框图片border-image的url属性，通过相对或绝对路径链接图片。
2、边框图片的剪裁border-image的数值参数剪裁边框图片，形成九宫格。
3、剪裁图片填充边框边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。
4、执行重复属性被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。
5、完成绘制，实现效果
绘制原理动画示意，本flash动画以第一个demo效果做示例，请点击其中的&下一步&按钮，可看到一步一步的演示：
四、border-image的一些应用自适应的圆角效果使用图片如下：
此图片的剪裁宽度为20像素，基本上就是此图的圆角大小。div的边框宽度为10像素，其CSS核心样式如下：代码如下: .border_image{ -moz-border-image:url(../image/rounded_corner.png) 20/10 -webkit-border-image:url(../image/border.png) 20/10 }
结果如下：
您可以狠狠地点击这里：
多边框效果使用图片如下：
圆角和边框大小都是20，就不上CSS代码了，大同小异。终效果如下图：
您可以狠狠地点击这里：
投影效果使用素材图片如下：
剪裁宽度和边框宽度都是2 5 6 2，这里的投影我直接使用photoshop的投影样式生成的，发现用在边框投影上有一点点不足，需要手动调整，截取投影的四边，以及重复区域再拼合一下，您可以自己试试如果实现最佳的投影效果。
效果如下图：
您可以狠狠地点击这里：
选项卡自适应选项卡，CSS2中实现自适应选项卡需要将背景图片制作的较长，而且需要两层标签，但是在CSS3中，图片要短，且一个标签就可以搞定。例如，这是淘宝新首页搜索选项卡的背景图片（已剪裁），，要是使用border-image，只要值么点图就可以了，
边框图片剪裁大小和边框宽度都是5 5 0；底边为0，其余都是5像素，结果效果为：
您可以狠狠地点击这里：
其他还有很多其他的应用，以前我们制作渐变背景，一张背景图很少可以重复使用，而有了border-image后就不会有这样的问题了，因为其可以拉伸。我们还可以利用border-image做高光按钮，做自适应的popup对话框，等等，太多了，就不一一举例了。
五、border-image效果的jQuery插件正如开始所讲的，border-image仅Firefox3.5，chrome，Safari支持，IE这类浏览器不支持，但是并不代表他们无法实现类似的效果。例如利用，可以让Firefox2实现类似效果，IE下的也是支持矢量绘图，而这些就是此jQuery插件实现类似border-image效果的原理或称之为核心。
您可以狠狠地点击这里：（插件js）
使用方法首先需要调用jQuery库，然后就是上面提供的js文件了。方法为borderImage，如下面的示例代码：
$('#element').borderImage('url(&border.png&) 30% 35% 40% 30%');
对此插件我个人评价不高，原因如下：一是IE6及以上也可以实现类似canvas效果（需js插件支持），没有必要修改头部什么再使用VML绘图；二是兼容性欠佳，IE6下无法实现高宽大于100像素的边框的拉伸；IE8下貌似也有点问题。
因而，我不具体说，一带而过。
您可以狠狠地点击这里：
六、总结从本文的篇幅可以看到border-image的潜力真是很惊人，我可以感觉到这将会是CSS3中的重磅武器之一。本文大部分的精力是在讲解border-image的原理，因为我非常看好border-image的应用前景，所以尽可能细致的讲清楚border-image各个属性的含义，让即使初学者也能较好的理解border-image的含义，本文列举的几个应用可以说只是border-image最基本的些应用。如果加上些创意的思考和天马行空的想象，真不知border-image可以创造出什么奇妙的事情来。
我开始深入学习CSS3方面的东西也只是最近开始，这东西，非要投入进入，你才会感受到这玩意真是酷，太不可思议了。我现在可以想象如果CSS3的世界到来，那时候，网页将会是多么精彩的一个世界。好了，就说这些，共同进步吧。
七、参考内容1、百度百科，九宫格：2、W3C官方文档： 3、CSS3中文手册4、
如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进行提问交流。转载请注明来自张鑫旭
大家感兴趣的内容
12345678910
最近更新的内容您所在的位置： &
3.3.2　border-image属性使用方法（1）
3.3.2　border-image属性使用方法（1）
机械工业出版社
《图解CSS3：核心技术与案例实战》第3章CSS3边框，本章主要介绍CSS3新增的边框特性，首先从CSS的border属性着手切入，分别介绍了CSS3新增边框特性，border-color、border-image、border-radius以及box-shadow。详细介绍了每个特性的语法规则，并且结合一些简单的案例，以图解的方式介绍了这些特性的具体使用方法以及在IE下相应的兼容和处理方式。本节为大家介绍border-image属性使用方法。
3.3.2　border-image属性使用方法（1）
为了更好地理解，暂时把border-image在语法的表达形式进行属性的分解阐述（实际应用中是不能分解的，此处只是用来帮助大家更好地理解border-image属性）。
引入背景图片：border-image-source。
切割引入背景图片：border-image-slice。
边框图片的宽度：border-image-width。
边框背景图片的排列方式：border-image-repeat。
接下来重点学习border-image拆分出来的四个属性。
1．border-image-source
border-image-source:&url(image&url); &/*image&url可是以边框图片的相对地址，也可以是绝对地址*/&
border-image-source跟CSS2中的background-image属性相似，也是通过url()来调用背景图片，图片的路径可以是相对地址，也可以是绝对地址，当然不想使用背景图片也可以设置为&border-image:none&；其默认值就是none。
2．border-image-slice
border-image-slice:[&|&]&{1,4}&&&&fill&?&
border-image-slice是用来分解引入进来的背景图片，这个参数相对来说比较复杂和特别，主要表现在以下几点。
1）取值支持&number& | &percentage&。其中number是没有单位的，因为其默认的单位就是像素。除了直接用number 来设置外，还可以使用百分比值来表示，即相对于边框背景图片而言的，例如边框图片的大小是300px&240px，取百分比为25%，30%，15%，20%，它们实际对应的效果就是剪切了图片的60px，90px，36px，60px的四边大小，如图3-4所示。
border-image-slice中的number或者percentage都可以取1～4个值，这个类似于CSS2 中的border-width的取值方式，也遵从top、right、bottom、left的规则，如果对这个不太清楚可以参考CSS2中的border-width或者padding、margin等属性的使用方法。
Fill从字面上说就是填充的意思，如果使用这个关键字时，图片边界的中间部分将保留下来。默认情况下为空。
2）剪切的特性（slice）。在border-image中slice是一个关键部分，也是让人难以理解的部分。如果理解CSS3的clip属性，再理解border-image-slice相对会轻松一些。border-image-slice虽然表面上说不是剪切，但在实际应用中它就是一种纯粹的剪切，它把通过border-image-source取到的边框背景图片切成九份，再像background-image一样重新布置。
来看一个示例，其剪切的效果如图3-5所示。
对应的代码如下所示。
div&{ &&&border:&12px&double& &&&-moz-border-image:&url(../image/border.png)&124; &&&-webkit-border-image:&url(../image/border.png)&124; &&&-o-border-image:&url(../image/border.png)&124; &&&border-image:&url(../image/border.png)&124; &}&
上面的示意中，它在距边框背景图的top、right、bottom、left四边的124px分别切了一刀，这样一来就把背景图切成了九个部分，称为&九宫格&。&九宫图&在本文专指由九个方格形成的矩形布局图，正如图3-5所示。这样就应用这个&九宫格&来帮助我们了解border-image的绘制原理。图3-6是来自W3C官网的border-image背景图，也是一张重要的示意图，因为这张图刚好具有我们所说的&九宫格&（27x3）x(27x3)。
【责任编辑： TEL：（010）】&&&&&&
关于&&的更多文章
这是一本介绍如何使用HTML5和JavaScript进行Android游戏开发的书
本书描述了黑客用默默无闻的行动为数字世界照亮了一条道路的故事。
讲师： 0人学习过讲师： 33人学习过讲师： 86人学习过
sdn（软件定义网络）是未来网络发展的趋势，它将网络
淘宝的搜索规则一直在变，有的因素权重在增加，有的因
建立和维护世界级的MySQL数据库，执行有效查询并深入
Linux是一款开源的操作系统，得到了广大开发者的青睐。掌握Linux系统的指令及其用法是学习Linux系统的基础。本书详细地介绍了常
51CTO旗下网站假如你直接来到这篇下篇，那建议你赶紧回去补一下昨天写的上篇，，看完的童鞋，继续….
能不能控制图片边框的宽度，而不是每次都要调试盒子边框宽度？当然是有，下面就来介绍这个border-image-width这个可选属性值
边框图片宽度border-image-width
border-image-width
[ &length& | &percentage& | &number& | auto ]{1,4}
我叫border-image-width，我的作用就是代替盒子本身的边框宽度border-width。假如指定，那么边框图片宽度就由我来做主，假如不指定，那么图片边框宽度就由盒子的边框宽度来固定。我可以用具体像素、数字（表示几倍）和百分比来表示，最少1个值，最多4个值，分别代表上右下左图片边框宽度，注意哦，相关代码如下：
.border-image{
border:20px solid #000;
//盒子边框宽度为20px
border-image-source:url(border.png);
border-image-width:27px 1 10% 27 //边框图片宽度设置为top:27px,right:1倍,bottom:10%,left:27px，因此这些值将代替20px成为图片边框宽度。
边框图片外凸border-image-outset
border-image-outset
[ &length& | &number& ]{1,4}
我叫border-image-outset，我的作用就让边框背景延伸到盒子外。有两个属性值length和number，前者是具体的像素单位，后者是数字，最少1个值，最多4个，分别代表上右下左图片边框向外延伸的距离，相关代码如下：
.border-image{
border:27px solid #000;
//盒子边框宽度为27px
border-image-source:url(border.png);
border-image-outset:27px 27px 27px 27 //边框图片向设置为27px，那么背景图将会从盒子最外边界向外上右下左各延伸27px。
边框图片重复border-image-repeat
border-image-repeat
[ stretch | repeat | round ]{1,2}
我叫border-image-repeat，顾名思义，我的作用就让边框背景是否重复，默认值为stretch，是拉伸的意思，4个角4个区域分别做水平和垂直方向的拉伸，来填补边框的间隙；repeat是就是让4个角4个区域做完水平和垂直方向的复制图像，做CTRL+V运动，把边框之间的空隙填满；而round[环绕]是把4个角和4个区域分成均等区域，然后用背景图片切好能铺满整个边框空隙，不能多也不能少，正好合适。听说下面有demo↓：
.border-image-stretch{
border:27px solid #000;
border-image-source:url(/2014/09/border.png);
border-image-slice:27 27 27 27;
border-image-repeat:
.border-image-repeat{
border:27px solid #000;
border-image-source:url(/2014/09/border.png);
border-image-slice:27 27 27 27;
border-image-repeat:
.border-image-round{
border:27px solid #000;
border-image-source:url(/2014/09/border.png);
border-image-slice:27 27 27 27;
border-image-repeat:
效果如下：
可以点击这里查看完整：
手机的童鞋可以拿出手机来扫~~
对于应用来说，这个边框图片太强大了的，随便一折腾就可以弄出奇形怪状的边框来，使得边框不在拘泥于那些传统的线框。不管你是调slice值，还是repeat值、或者是outset值都可以变化很多新花招，刚刚我们其实在做demo展示的时候已经展现出来，那么下面我就用来一个一张图片构造最简单的我们的圆弧长方形。
用到图片：
效果如下：
更多详细demo，请点击：
好了，就这么多了，这个属性目前对于IE来说真是渣渣，但是手机端上的兼容性还是非常友好的，假如你不想用老旧的线来构造一个边框的话，那么就换一张图片来构造丰富的边框样式吧，你会发现，css3的世界真是非常强大的。
预祝各位国庆愉快，希望29号回去路上不堵车，今年国庆要交份子钱的童鞋，请默默地点个赞，然后在评论中说出你的观点。
本文地址：
原创文章，转载请注明来自：
本站专栏文章皆为原创，转载请注明出处（带有 前端乱炖 字样）和本文的显式链接()，本站和作者保留随时要求删除文章的权利！
WRITTEN BY
PUBLISHED IN
本专栏其他文章
浏览:2619赞:2
浏览:3905赞:4
浏览:2835赞:4
浏览:4779赞:0
浏览:2531赞:1
浏览:3317赞:0border-image是CSS3的一个属性，由于比较复杂，总是处于一知半解的状态，今天下定决心，花时间整理了一下，供大家共勉和学习。
border-image的用处
没用border-image之前，觉得css的属性基本够用，border-image完全是将简单的工作复杂化，当学习完该属性以后，发现该属性的运用能够大大节省编码时间和效率，总结一下，大致适用于以下两个场景：
元素边框不规则的情况。这时候，就需要用设计图作为边框背景，border-image与background-image相比，好处是更具灵活性，可以用代码控制边框背景的拉伸和重复，因而能够创造出更多样的效果
按钮宽高不确定的情况。用border-image来制作按钮，可以用同一张背景图，制造出各种宽高的按钮。
border-image属性分析
border-image-source
边框背景图片。格式为：url(“…”)。
border-image-slice
图片边框向内偏移的距离。格式：border-image-slice：top right bottom left。分别指切割背景图片的四条线距离上右下左的距离。 如下图所示：
该距离接受数值，百分数。默认数值的单位是px,但是不能在数值后面加px，否则这句css将不被浏览器解析。
用法和margin，padding类似。这里以数值举例，百分数同理。
border-image-slice: 10;
border-image-slice: 10 30;
border-image-slice: 10 30 20;
border-image-slice: 10 30 20 40;
四条线将背景图分割成了9个部分，其中1,2,3,4,6,7,8,9这八个区域将会被切割，作为图片边框，如果除了设置数值或者百分数，还加了一个“fill”，那么区域5就会作为背景填充进元素content，如：
border-image-slice: 25 11
注意：slice不接受负值；如果slice切割的左右距离之和大于背景图的宽，则上下边框不显示。如果slice切割的上下距离之和大于背景图的高，则左右边框不显示。
border-image-width
图片边框的宽度。只接受数值，且不能加单位。
border-image-repeat
图像边框是否应平铺(repeat)、铺满(rounded)或拉伸(stretch)。而无论怎样铺，四个角，即区域1,3,7,9是不会重复铺，只会被相应拉伸。下面以最为经典的图为例吧：
原图如下：
stretch(默认值)
height: 50
border: 40
border-image-source: url("img/border.png");
border-image-slice: 27
border-image-repeat:
&div class="box"&&/div&
效果如图：
可以看到每个区域都被横向和纵向拉伸了
width: 100
height: 100
border: 40
border-image-source: url("img/border.png");
border-image-slice: 27
border-image-repeat:
&div class="box"&&/div&
效果如图：
可以看到背景在以原形状等比例缩放以后，持续平铺，容易出现断层。
width: 100
height: 100
border: 40
border-image-source: url("img/border.png");
border-image-slice: 27
border-image-repeat:
&div class="box"&&/div&
效果如图：
同样是重复平铺，但是round会处理得更平滑，不会出现断层情况，因此round通常比repeat更常用。
border-image-outset
边框图像区域超出边框的量。格式：border-image-outset : length | number。length是数值加单位“px”，number指的是相对于边框宽度增加的倍数。下面举例来说明：
height: 50
border: 27
border-image-source: url("img/border.png");
border-image-outset: 10
border-image-slice: 27
border-image-repeat:
&div class="box"&&/div&
效果如图：
其中青绿色的区域是扩展出来的内容宽度10px
padding: 60
height: 50
border: 27
border-image-source: url("img/border.png");
border-image-outset: 1;
border-image-slice: 27
border-image-repeat:
&div class="box"&&/div&
效果如图：
border的宽度是27px，设置超出1倍，就是超出27px，即图中青绿色区域。大家可以试试不加body的padding属性，会发现div显示不完整。所以，想要扩展div的大小直接设置width和height就好了，用boder-image-outset有点鸡肋。
不得不说的border-image坑
新版Chrome浏览器border-image属性不生效
在stack overflow找到答案，说是在用border-image属性之前加上该属性即可：border：27px solid transparent；后看到国内某博主说只要设置成border: 27px soild就行。后经尝试，确实如此 。
复合属性需要添加浏览器前缀，单个属性不需添加前缀
当使用复合属性时，需要添加前缀，像这样：
border-image: url("img/border.png") fill 10;
-webkit-border-image: url("img/border.png") 10;
-moz-border-image: url("img/border.png") fill 10;
-o-border-image: url("img/border.png") 10;
注意：IE和火狐都添加了fill，否则背景不会自动填充到元素的content。一旦使用了单个属性，那么就不能添加前缀，否则不生效。
背景图片如下：
先来一个短一点的按钮。
width: 100
height: 30
border: 14
border-image-source: url("img/btn.png");
border-image-slice: 14
&div class="box"&&/div&
效果如图：
现在仅仅修改“width:200px”,结果按钮的长度就自动增加了，是不是很方便？
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：7667次
排名：千里之外
原创：14篇
(1)(1)(2)(2)(2)(2)(4)