边框图片效果

border-image 设置边框图片的效果

border-image-source //引入背景图片地址

border-image-slice //切割引入的背景图片，只需要写数值，不需要带单位

border-image-width //边框背景图片的宽度

//如果你设置了边框的宽度border-width，图像会偏移;

//但是设置边框背景图片的宽度，图像就不会偏移。

border-image-repeat //边框背景图片的排列方式

border-image-outset //边框背景向外扩张

border-image-slice最多可以设四个值，对应的是裁取border-image-source所引入图片的

四个角的大小。

eg.div{
        border-image-source:url(……);
    border-image-width:27px;
    border-image-slice:27;
}

上面这个示例中，border-image-slice：27;只会显示图片在边框位置的，图片在元素部分是被镂空的，不显示。若你想显示图片在元素区域的内容，在在后面设置fill。

border-image-slice：0 fill;

上面的实例中，边框图片是在border里面的，你可以设置一下border-image-outset，从而使

边框图片显示在边框位置。

若边框图片为九宫格格式，那么你可以设置border-image-width、border-image-slice、

border-image-outset为数值大小相同的值。

eg.div{
        border-image-source:url();
    border-image-width:27px;
    border-image-slice:27;
    border-image-outset:27px;
}

border-image-repeat 显示九宫格四个边的显示排列方式，有如下四个值：

1、stretch 指定以拉伸方式填充边框背景图，默认值

2、repeat 指定以平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。

3、round 指定以平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的

大小，直至正好可以铺满整个边框。(常用)

4、space 指定以平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片之

间的间距，直至正好可以铺满整个边框。(浏览器暂不支持)

边框图片，除了使用九宫格以外，还可以使用非九宫格的图片，比如一个按钮图片，同样是

border-image-source将图片引进来，然后设置border-image-width，并用border-image-slice

截取合适的图片边角。

我们可以使用border-image的简写形式，各属性书写顺序如下所示：

border-image：(border-image-source) (border-image-slice/border-image-width/

border-image-outset) (border-image-repeat)

eg.div{
        border-image:url() 27/27px/27px round;
}