CSS3的新增属性border-image

border-image属性是CSS3的border模块新增加的属性，从意思来看应该是指：边框图片。其实标签的非边框部分也会被图片覆盖，大致效果如下：



大致代码如下：

width:200px;
height:200px;
border:dotted 20px;
-webkit-border-image:url("image/f1.jpg") 20 20 repeat repeat;

border-image必须设置border-width就边框才有效。

定义：border-image：url top right bottom left x-repeat y-repeat

url 采用的图片的路径

top,right,bottom,left就是图片的切割方法，对应下面的九宫格，但是简单来说可以对应设定的border-width来确

定，这两个属性的值最好是对应 注意：这个参数默认是px为单位，但是不能再加单位px了！

表示图片的变换样式，包括三个值 stretch拉伸 repeat重复 round平铺

参考：http://blog.sina.com.cn/s/blog_7d23d89b010134eb.html