border-image详解

一、border-image的兼容性

---

二、border-image的参数（包括图片、裁剪位置、重复性）

       1、图片（border-image-source）采用url（）调用，可以是相对/绝对路径                          

      2、图片的裁剪位置（border-image-slice）                                                                                

            1>参数没有单位，专指像素。border-image：url（a.png）27 repeat;                                                   这里27指27px                                                                                                                      

             2>支持百分比，百分比大小相对于边框图片而言                                                                

             3>裁剪特性，效果的实现上类似于九宫格裁剪，有1~4个参数，方位符合CSS普遍的方位规则（上右下左，顺时针）                                                                                              

               border-image：url（border.png）30 %  35% 40%  30%  repeat;                                               

在图片上部30%的地方裁剪一下，在右部35%的地方裁剪一下，在底部40%的地方裁剪一下，在左部30%的地方裁剪一下。形成了九个分离区域——九宫格

     3、重复性（border-image-repeat）参数0~2个，2个参数一个水平，一个垂直

            这里重复与background的背景重复，差异较大。background图片的重复包括：重复、不重复、水平重复、垂直重复。对于border-image而言包括：repeat（重复）、round（平铺）、stretch（拉伸），其中stretch是默认值。

---

三、应用

使用的图片

---

四、参考内容

1、http://www.zhangxinxu.com/wordpress/?p=518

2、http://www.w3school.com.cn/cssref/pr_border-image.asp

---