虽然CSS3新增了这个功能，但是在W3school里面并没有给出具体详细的解释，还好网上不乏大神给你我们很全面的解释其中的原理-css3：border-image边框图像详解
边框图片的原理是四个角不变，边拉伸或平铺，border-image-slice:27 27 27 27（可以缩写，同内外边距），距离各边向内偏移的距离后切割
按照此方法需要进行自己的borderimg的制作（类似于sprite）
（21+1+21）
如上，一个像素边框在PC端显示没有任何问题，但是按照 走向视网膜（Retina）的Web时代 中对一个像素在ritina中的解释，会分为四个设备像素来显示，所以产生一模糊虚边，导致内部产生了一个虚框，如图上
代码为border:solid 21px transparent; border-image:url("corner.png") 21 round;
为了解决这个问题，需要对原始图片做一些处理，四边各留出一个像素的空白，如图下
（[1+21]+1+[21+1]）
代码为border:solid 22px transparent; border-image:url("corner2.png") 22 round;
原文：http://www.cnblogs.com/gulei/p/5283785.html