border-image的正确用法

border-image 通过指定一张图片来取替 border-style 定义的样式，但 border-image 生效的前提是： border-style 和 border-width 同时为有效值(即 border-style 不为 none，border-width 不为 0)。

border-image-source

border-image: none | <image>

指定边框图片的地址。 none 表示border-image不做任何效果，边框使用 border-style 指定的样式。

bordre-image-slice

bordre-image-slice [<number> | <percentage>]{1,4} && fill?

border-image-slice 从名字上看就很好理解：边框图像切片。指定4个值(4条分割线：top, right, bottom, left)将 border-image-source 分割成9宫格，如下：

四条分割线的值

number 不带单位的数值。1 代表 1个图片像素。
percentage 百分比。

关键字：fill

关键字fill的作用是：将border-image-source九宫格中间那一块切片作为DOM节点的背景。
素材图片box.png:

htmlcss
    <p>这是不带fill的</p>
    <div class="box"></div>
    <p>这是带fill的</p>
    <div class="box1"></div>
    div{
        margin: 30px;
    }
    .box {
        width: 27px;
        height:27px;
        border: 27px solid;
        border-image: url(http://jiuaibuni.top/dome/img/margin-image.png) 27 27 27 27 repeat stretch;
    }
    .box1 {
        width: 27px;
        height:27px;
        border: 27px solid;
        border-image: url(http://jiuaibuni.top/dome/img/margin-image.png) 27 27 27 27 fill repeat stretch;
    }

border-image-width

border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}

border-image-width 字面意思是边框图片宽度，作用是将 DOM 节点分割成九宫格。 假设 border-image-slice 分割 border-image-source 的九宫格为A， border-image-width 分割 DOM 的九宫格为 B，A 与 B 的每个格子存在一一对应关系，具体如下：

border-image-width 字面意思是边框图片宽度

length 带 px, em, in … 单位的尺寸值
percentage 百分比
number 不带单位的数字；它表示 border-width 的倍数
auto 使用 auto， border-image-width 将会使用 border-image-slice 的值
border-image-width 的参数不能为负值
border-image-width的缺省值是 number 类型：1
htmlcss
    <p>这是不写border-image-width值的(默认为number：1)</p>
    <div class="box"></div>
    <p>这是border-image-width: auto;</p>
    <div class="box1"></div>
    <p>这是border-image-width: 2;</p>
    <div class="box2"></div>
    <p>这是border-image-width: 16px;</p>
    <div class="box3"></div>
    div{
        margin: 30px;
    }
    .box {
        width: 27px;
        height:27px;
        border: 27px solid;
        border-image: url(http://jiuaibuni.top/dome/img/margin-image.png) 27 27 27 27 repeat stretch;
    }
    .box1 {
        width: 27px;
        height:27px;
        border: 27px solid;
        border-image: url(http://jiuaibuni.top/dome/img/margin-image.png) 27 27 27 27 repeat stretch;
        border-image-width: auto;
    }
    .box2{
        width: 27px;
        height:27px;
        border: 27px solid;
        border-image: url(http://jiuaibuni.top/dome/img/margin-image.png) 27 27 27 27 repeat stretch;
        border-image-width: 2;
    }
    .box3{
        width: 27px;
        height:27px;
        border: 27px solid;
        border-image: url(http://jiuaibuni.top/dome/img/margin-image.png) 27 27 27 27 repeat stretch;
        border-image-width: 16px;
    }

border-image-source

border-image-source:url();

背景图片的地址

border-image-outset

border-image-outset: [ <length> | <number> ]{1,4}

border-image-outset 字面意思是边框图片开端。作用是重新指定 border image area 的边界。
通过指定 border-image-outset 的值，可以把 border image area 的区域延伸到 border-box 之外。如下：
htmlcss
    <p>这是不写border-image-outset值的(默认为0)</p>
    <div class="box">123</div>
    <p>这是border-image-outset: 27px;</p>
    <div class="box1">123</div>
    div{
        margin: 30px;
    }
    .box {
        width: 27px;
        height:27px;
        border: 27px solid;
        border-image: url(http://jiuaibuni.top/dome/img/margin-image.png) 27 27 27 27 repeat stretch;
    }
    .box1 {
        width: 27px;
        height:27px;
        border: 27px solid;
        border-image: url(http://jiuaibuni.top/dome/img/margin-image.png) 27 27 27 27 repeat stretch;
        border-image-outset: 27px;
    }
border-image-outset 与 border-image-width 参数的意义是一样的。

border-image-repeat

border-image-repeat: [ stretch | repeat | round | space ]{1,2}

border-image-repeat 字面意义是 边框图片平铺。

stretch 默认值。拉伸图像来填充区域
repeat  平铺（repeated）图像来填充区域。
round   类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
space   类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围。
作用是指定 border-image 的平铺方式。语法上最多可接收两个参数，第一个参数指定水平方向边框的平铺方式，第二个参数指定垂直方向边框的平铺方式，九宫格的中间区域受这两参数的共同影响，如下：
htmlcss
    <p>border-image-repeat:stretch</p>
    <div class="box"></div>
    <p>border-image-repeat:repeat</p>
    <div class="box1"></div>
    <p>border-image-repeat:round</p>
    <div class="box2"></div>
    <p>border-image-repeat:space</p>
    <div class="box3"></div>
    div{
        width: 100px;
        height:100px;
        margin: 30px;
    }
    .box {
        border: 27px solid;
        border-image: url(http://jiuaibuni.top/dome/img/margin-image.png) 27 27 27 27 fill;
        border-image-repeat: stretch stretch;
    }
    .box1 {
        border: 27px solid;
        border-image: url(http://jiuaibuni.top/dome/img/margin-image.png) 27 27 27 27 fill;
        border-image-repeat:repeat repeat;
    }
    .box2 {
        border: 27px solid;
        border-image: url(http://jiuaibuni.top/dome/img/margin-image.png) 27 27 27 27 fill;
        border-image-repeat:round round;
    }
    .box3 {
        border: 27px solid;
        border-image: url(http://jiuaibuni.top/dome/img/margin-image.png) 27 27 27 27 fill;
        border-image-repeat:space space;
    }

一沙一世界，一花一天堂。君掌盛无边，刹那成永恒。