通过边框背景这个新特性可以让我们的边框更加丰富。 相关属性 ①border-image-source 引入图片背景地址 ②border-image-slice 切割背景图片 (通过设置四个值来知道四个角要显示的尺寸，在这里加入fill可以将内部填充) ③border-image-width 边框图片的宽度 (通过设置四个值来知道边框四条边的宽度。) ④border-image-repeat 边框中边的方案 (stretch拉伸(默认)，repeat平铺(超过则截断)，round平铺(动态调整图片大小)，space平铺(动态调整图片间距)。) ⑤border-image-outset 边框背景向外扩张的范围 (为了刚好包含住background的范围，它个值往往就是边框每条边的宽度。) ⑥border-image 前面五个属性的简写
边框应使用特制的图片，能够分成九宫格(不一定每格大小都一样)，如用ps制作了一张这样的图： 它的总大小是210px，每个格子为70px：
*测试代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>CSS3边框图片效果</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="id1"> <span>加入图片边框</span> </div> <br> <div id="id2"> <span>用百分比切割</span> </div> <br> <div id="id3"> <span>向外扩张以包含住背景</span> </div> <br><br><br><br><br><br><br> <div id="id4"> <span>设定四个边的方案</span> </div> <br> <div id="id5"> <span>尝试fill填充</span> </div> </html> @charset "utf-8"; div span{ vertical-align: -200px; } #id1{ text-align: center; width: 400px; height :400px; /*边框的地址*/ border-image-source: url(lzh.png); /*边框图像宽度，四个边都是70px*/ border-image-width: 70px; /*边框的切割，四边都向内切割70(px)，即每个角显示70x70的小格，其它部分自动拉伸*/ border-image-slice: 70; } #id2{ text-align: center; width: 400px; height :400px; border-image-source: url(lzh.png); border-image-width: 70px; border-image-slice: 33.4%; } #id3{ text-align: center; margin: 0 auto; width: 400px; height :400px; background-color: gray; border-image-source: url(lzh.png); border-image-width: 70px; border-image-slice: 33.4%; /*为了遮住背景颜色,向外扩张*/ border-image-outset: 70px; } #id4{ text-align: center; width: 400px; height :400px; border-image-source: url(lzh.png); border-image-width: 70px; border-image-slice: 33.4%; /*动态调整边图的大小以平铺*/ border-image-repeat: round; } #id5{ text-align: center; width: 400px; height :400px; border-image-source: url(lzh.png); border-image-width: 70px; /*既平铺，又填充*/ border-image-slice: 33.4% fill; border-image-repeat: round; }运行结果： 另外，利用边框图片(border-image)，还可以做出按钮的效果来。
