先从基本的语法开始入手，例如border-image: url(border.png) 26 repeat stretch;。可以看出分成三个部分：url，剪裁位置，显示方式
首先是url，可以使用绝对或相对路径来加载边框图片，比较简单就不啰嗦了。
其次是剪裁位置，使用TRBL原则（top-right-bottom-left），上例中26就表示上右下左都剪裁26px。你可以设成26 52，就表示上下剪裁26px，左右剪裁52px。你也可以设成10 15 20 25表示上10px，右15px，下20px，左25px位置开始剪裁。单位不指定的话，默认是px像素，你也可以设成%百分比。比如一张50px * 50px的图片，你设成20%，就表示上右下左都剪裁10px。
经过上右下左剪裁后，好好一张图片就成了9宫格的样子。（9宫格大家都知道的吧？锤子手机界面就是9宫格）。一图胜千言
剪裁前该图片的尺寸是78px * 78px
经过border-image: url(border.png) 26;剪裁后成了9宫格
9宫格分为9个部分（这不是废话么…）：上右，上中，上左，中右，中中，中左，下右，下中，下左。经剪裁后，9宫格最中心的部分，即中中，不会被显示出来，会被丢弃。能显示的就是9宫格周围那一圈。其中四个角（图中红色菱形部分）就分别固定在border的四个角。即上右部分就显示在border的右上角，同理上左，下右，下左部分就分别显示在border的左上角，右下角，左下角。剩下4个部分上中，中右，中左，下中（图中蓝色菱形部分）的显示效果需要结合显示方式。
显示方式分stretch拉伸，repeat重复，round平铺。默认值是stretch拉伸。你需要对9宫格的上中和下中设置水平显示方式，对中右和中左设置垂直显示方式。
stretch拉伸最容易理解。但round平铺和repeat重复比较搞，有什么区别呢？round会改变9宫格部分的原始尺寸，而repeat重复会保留9宫格部分的原始尺寸，然后居中开始往两边无脑重复。
比如水平平铺（9宫格里上中，下中部分平铺），垂直拉伸（9宫格里中右，中左部分拉伸），所谓一图胜千言：
.border-image { width: 120px; height: 80px; border: 26px solid; border-image: url(border.png) 26 round stretch;}
查看更多关于CSS3border-image介绍_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114846