css3边框背景border-image

边框背景——border-image

边框背景主要是用来给元素边框添加背景图像，本质是用一张图片来修饰边框背景，看下图效果：


    -------------------------->>


用左边图片来完成右边的效果；

先看一下边框背景的参数：border-image：image  boeder-width（参数可写1-4个）图片填充方式（stretch/repeat/round）；

border-image有这样一个功能，它是用来把一张背景图片切割成九个部分的，分四刀切，就是border-width对应的四个参数；

第一刀是从上往下切



第二刀是从右往左切



第三刀是从下往上切



第四刀是从左往右切



最终将这个图片切为九个图，其中四个角落的图片会放到你要修饰的边框的四个角落，其余四条边的背景将会用中间浅色的图片来填充，填充方式有stretch/repeat/round三种；

当border-width只给一个参数的时候表示四个切割宽度均为所给值

；当给两个参数时，第一个表示上下，第二个表示左右；

当给3个参数时，第一个表示上，第二个表示左右，第三个表示下。