border-image-source属性(CSS设置)
border-image-source属性(CSS设置)
一、border-image的兼容性
border-image能够说是CSS3中的一员大将，将来一定会大放光荣，其运用潜力真的是十分的惊人。惋惜现在支撑的浏览器有限，仅Firefox3.5，chrome浏览器，Safari3+支撑border-image。所以，就本文而言，IE浏览器能够回家歇息了，Firefox3及其以下以及Opera浏览器也能够歇息去看《阿凡达》了。所以，本文供给的一些demo页面，要在Firefox3.5+，chrome或Safari3+浏览器下才能够看到作用。
CSS3中文手册上border-image兼容性缩略图
更新于2016-06-14
现在IE11+，FireFox以及Chrome浏览器均已支撑border-image，并且现在也就Android4.3及其以下版本需求-webkit-私有前缀，能够说border-image的年代行将到来。
//zxx:没想到这一晃一等便是6年！
二、了解border-image的一些特性
咱们或许关于CSS2中的background特色比较了解，例如：background:url(xx.jpg)27pxno-repeat;
指代的是图片(url(xx.jpg))，方位(27px)，重复性(no-repeat)。
border-image于此相似，border-image包括图片，取舍方位（与background方位相同，也是数值，也支撑百分值），重复性。例如：border-image:url(border.png)27repeat;，指的便是图片(url(border.png))，取舍方位(27)，重复办法(repeat)。试着对比background，这有助于border-image特色的回忆。
详细描述border-image的参数
border-image的参数便是上面说到的三个：图片，取舍方位，重复性。
1、图片(border-image-source)
与CSS2中background-image特色相同，border-image的布景图运用url()调用，图片能够是相对路径或是绝对路径，也能够不运用图片，即border-image:none;
2、图片取舍方位(border-image-slice)
此参数特色比较鲜明：
1、没有单位，专指像素。这相似于flash的as脚本，舞台高宽，影片剪辑巨细，位移直接便是一个数值，没有单位，由于默认单位便是像素(px)了。例如：border-image:url(border.png)27repeat;这儿的27专指27像素。
2、支撑百分比值，百分比值巨细事相关于边框图片而言，假定边框图片巨细为400px*300px，则20%的实际作用便是取舍了图片的60px80px60px80px的四边巨细。
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%stretchstretch;；1则表明水平方向及笔直方向均运用此参数；2个参数的话则第一个参数表水平方向，第二个参数表明笔直方向。例如：border-image:url(border.png)30%40%;就等同于border-image:url(border.png)30%40%roundrepeat;表明水平方向round（平铺），笔直方向repeat（重复），至于何为平铺何为重复下面会深化讲解。
三、深化了解border-image的宽度和展现办法
分开了解border-image的宽度或是展现办法其实不太难的，关键是这两者结合运用时分的意义，需求花一定的功夫的了解。
协助了解的九宫格模型
何为九宫格？为什么咱们需求九宫格协助了解？
简略的数字九宫格
“九宫格”是我国书法史上临帖写仿的一种界格，又叫“九方格”，即在纸上画出若干大方框，再于每个方框内分出九个小方格，以便对照法帖范字的笔画部位进行练字。在本文，“九宫格”就专指由九个方格构成的矩形布局，例如左图便是一个很简略的数字九宫格。
border-image的数值参数其实是用来取舍边框图片的，正好“哗哗四刀”切出了个九宫格的模型，所以，有意或无意，巧合仍是必定，咱们需求用到九宫格模型协助咱们了解border-image的制造原理。下面这张图是本文十分重要的基本的暗示图，由于这是张具有代表性的九宫格图案(27*3)*(27*3)。
九宫格代表图gif演示<————————>九宫格代表图gif演示
这张图能够协助咱们更好的了解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:400px;
height:100px;
border:1emdoubleorange;
border-image:url(../image/border.png)27;
}
成果：
border-image默认显现
您能够狠狠地点击这儿：实例demo1
作用剖析：
这儿没有显现办法的参数，正如上面所说的，0参数即运用默认的stretch拉伸，所以从图上能够看到四个对边的拉伸作用。上面还说到，四个对角是不受重复办法影响，该什么姿态仍是什么姿态，无拉伸平铺，本面目示人。见下图的标示（扩大200%）。
拉伸的标示
这个九宫格各区域展现办法的标示图在border-image中是通用的，不管border-image的代码怎么改动，其显现作用的原理中心便是左面这张九宫标示图，亘古不变的是四个边角，这四个边角便是四条边框的重叠区域，不会有拉伸或是重复的展现作用。有改动的便是四边区域和中心区域，这几个区域中的水平和笔直特色也是稳如泰山，耸峙不变的，改动的就仅仅“拉伸”罢了，变成重复啦或是平铺。
由于其通用性，所以此显现原理标示图在下面就不逐个展现了，您找到对应的方位，修正“拉伸”为“平铺”或“重复”即可，其他都不用改动。
2、27像素取舍在1em边框宽度下round（平铺）显现作用
CSS代码：
.border_image{
width:400px;
height:100px;
border:1emdoubleorange;
border-image:url(../image/border.png)27round;
}
成果：
round作用图
您能够狠狠地点击这儿：实例demo2
3、27像素取舍在1em边框宽度下repeat（重复）作用
CSS代码：
.border_image{
width:400px;
height:100px;
border:1emdoubleorange;
border-image:url(../image/border.png)27repeat;
}
成果：
repeat作用图
您能够狠狠地点击这儿：实例demo3
上图我圈了四个边角，不难发现，这一个边角处的菱形都是被截掉的。这便是repeat的作用，还记得上面的毛坯房的例子吗？round会紧缩（或伸展）图片巨细使其正好在区域内显现，而repeat是不管三七二十一直接重复的，并且是居中重复，repeat从中心开端（这是我的调查，或许不精确）。
这儿还有一点需求留意：在webkit中心的浏览器下这个round特色和repeat特色好像没有没有区分，显现的作用是相同的，所以您在chrome浏览器或是Safari浏览器下看demo2和demo3的作用或许是相同的。Firefox3.5下能够精确区分这两个参数。
4、上实例款式缩写
上面的实例还能够进一步缩写。CSS如下：
.border_image{
width:400px;
height:100px;
border:doubleorange;
border-image:url(../image/border.png)27/1emrepeat;
}
完成的作用是相同的。您能够狠狠地点击这儿：实例demo4
border-image制造原理简述
我是这样了解的：共存在两个九宫格，一个是边框图片，还有一个便是边框自身，九个方位联系逐个对应。边框自身的特性让其变成了一个九宫格，四条边框交织，加上其围住的区域，正好构成一个九宫格。边框图片则是经过图片取舍完成了九宫格。这是了解制造原理的根底。
1、调用边框图片
border-image的url特色，经过相对或绝对路径链接图片。
2、边框图片的取舍
border-image的数值参数取舍边框图片，构成九宫格。
3、取舍图片填充边框
边框图片被切割成9部分，以逐个对应的联系放到div边框的九宫格中，然后再紧缩（或拉伸）至边框（border-width或border-image-width）的宽度巨细。
4、履行重复特色
被填充至边框九宫格四个旮旯的的边框图片是不履行重复特色的。上下的九宫格履行水平方向的重复特色（拉伸或平铺），左右的格子履行笔直方向的重复特色，而中心的那个格子则水平重复和笔直方向的重复都要履行。
5、完结制造，完成作用
制造原理动画暗示，本flash动画以第一个demo作用做示例，请点击其中的“下一步”按钮，可看到一步一步的演示（假如flash无法显现，请点击这儿直接观看）：
四、border-image的一些运用
自适应的圆角作用
运用图片如下：
圆角资料图片
此图片的取舍宽度为20像素，基本上便是此图的圆角巨细。div的边框宽度为10像素，其CSS中心款式如下：
.border_image{
border-image:url(../image/border.png)20/10px;
}
成果如下：
圆角作用
您能够狠狠地点击这儿：圆角作用demo
多边框作用
运用图片如下：
多边框作用资料
圆角和边框巨细都是20，就不上CSS代码了，迥然不同。终作用如下图：
多边框作用图
您能够狠狠地点击这儿：多边框作用demo
投影作用
运用资料图片如下：投影作用图片资料
取舍宽度和边框宽度都是2562，这儿的投影我直接运用photoshop的投影款式生成的，发现用在边框投影上有一点点缺乏，需求手动调整，截取投影的四边，以及重复区域再拼合一下，您能够自己试试假如完成最佳的投影作用。
作用如下图：
相片的投影作用
您能够狠狠地点击这儿：投影作用demo
选项卡
自适应选项卡，CSS2中完成自适应选项卡需求将布景图片制造的较长，并且需求两层标签，可是在CSS3中，图片要短，且一个标签就能够搞定。例如，这是淘宝新主页查找选项卡的布景图片（已取舍），，要是运用border-image，只要值么点图就能够了，完成选项卡作用需求的图片
边框图片取舍巨细和边框宽度都是550；底边为0，其他都是5像素，成果作用为：
选项卡完成的作用
您能够狠狠地点击这儿：选项卡demo
其他
还有许多其他的运用，曾经咱们制造渐变布景，一张布景图很少能够重复运用，而有了border-image后就不会有这样的问题了，由于其能够拉伸。咱们还能够使用border-image做高光按钮，做自适应的popup对话框，等等，太多了，就不逐个举例了。
五、border-image作用的jQuery插件
正如开端所讲的，border-image仅Firefox3.5，chrome，Safari支撑，IE这类浏览器不支撑，可是并不代表他们无法完成相似的作用。例如使用canvas绘图，能够让Firefox2完成相似作用，IE下的VML语言也是支撑矢量绘图，而这些便是此jQuery插件完成相似border-image作用的原理或称之为中心。
您能够狠狠地点击这儿：jquery.borderImage.js（插件js）
运用办法
首先需求调用jQuery库，然后便是上面供给的js文件了。办法为borderImage，如下面的示例代码：
$('#element').borderImage('url("border.png")30%35%40%30%');
对此插件我个人点评不高，原因如下：
一是IE6及以上也能够完成相似canvas作用（需js插件支撑），没有必要修正头部什么再运用VML绘图；
二是兼容性欠佳，IE6下无法完成高宽大于100像素的边框的拉伸；IE8下貌似也有点问题。
IE6下插件显现的糟糕作用
因此，我不详细说，一带而过。
您能够狠狠地点击这儿：border-image作用jQuery插件demo
六、总结
从本文的篇幅能够看到border-image的潜力真是很惊人，我能够感觉到这将会是CSS3中的重磅武器之一。本文大部分的精力是在讲解border-image的原理，由于我十分看好border-image的运用远景，所以尽或许详尽的讲清楚border-image各个特色的意义，让即使初学者也能较好的了解border-image的意义，本文列举的几个运用能够说仅仅border-image最基本的些运用。假如加上些创意的思考和天马行空的幻想，真不知border-image能够创造出什么美妙的工作来。
我开端深化学习CSS3方面的东西也仅仅最近开端，这东西，非要投入进入，你才会感受到这玩意真是酷，太难以想象了。我现在能够幻想假如CSS3的国际到来，那时分，网页将会是多么精彩的一个国际。好了，就说这些，共同进步吧。
优秀作品：
最新作品：
评论列表（共39人参与）参与讨论或分享设计作品获得视觉癖积分奖励
理过的图注册会员
2021-07-01 13:54:14
由解放日报报游客
2021-07-01 3:52:28
游客66755：border-image-soit you 煎熬是变美味的方法,加油也是如此 Its a way to make it delicious, and s草。 鹅不食草有什么功效
回复
个大时代注册会员
2021-07-01 22:46:15
也能够歇息去看《阿凡达》了。所以，本文供给的一些demo页面，要在Firefox3.5+，chrom2日，你栽树了吗?栽树造林是绿化祖国的百年大计。有青山，水才会秀丽。种树栽树，才会有绿色家乡。祝你栽树节心想事成!
回复