border-image是CSS3中诞生的新样式，它可以让从前纯色的边框样式使用图片来替代，更便于做出个性化的div边框，是不是觉得很带感？一起来试试吧。
语法：
border-image：<border-image-source> || <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? || <border-image-repeat>
为了方便理解border-image的取值，可将border-image理解成由以下5个伪属性组成：
border-image-source : none | <url>默认值：none该属性用于指定是否用图像定义边框样式或图像来源路径。
border-image-slice : [ <number> | <percentage> ]{1,4} && fill?默认值：100%该属性用于指定对边框背景图的分割方式
写本文档时尚无浏览器支持参数值 fill 关键字
border-image-width : [ <length> | <percentage> | <number> | auto ]{1,4}默认值：1该属性用于指定边框宽度。该属性可省略，由外部的border-width来定义
写本文档时所有浏览器只支持<length>类型的参数值
也可以省略此属性，在外部用border-width属性来设置该值
border-image-outset : [ <length> | <number> ]{1,4}默认值：0该属性用于指定对边框背景图的扩展
写本文档时尚无浏览器支持该属性
border-image-repeat : [ stretch | repeat | round ]{1,2}默认值：stretch该属性用于指定边框背景图的填充方式。可定义0-2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为stretch，则可省略不写。
写本文档时Opera尚不支持该属性，但却默认使用了stretch的效果
取值：
none：
无背景图片。
<url>：
使用绝对或相对地址指定图像。
<number>：
用浮点数指定宽度。不允许负值。
<percentage>：
用百分比指定宽度。不允许负值。
<length>：
用长度值指定宽度。不允许负值。
stretch：
指定用拉伸方式来填充边框背景图。
repeat：
指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round：
指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效
说明：
设置或检索对象的边框样式使用图像来填充。使用图像替代border-style去定义边框样式。当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。
对应的脚本特性为borderImage。
写法：
| 内核类型 | 写法(border-image) |
| Webkit(Chrome/Safari) | -webkit-border-image |
| Gecko(Firefox) | -moz-border-image |
| Presto(Opera) | -o-border-image |
| Trident(IE) |
border-image:url(skin/border.png) 27/27px stretch;
