CSS3边框图片效果

属性解释

CSS3提供了一个新的属性集合，用这几个属性可以嵌入图片形式的边框。这样，边框就可以自定义了。

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

2.border-image-slice//切割引入背景图片

3.border-image-width//边框图片的宽度

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

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

6.border-image//上面五个属性的简写方式

首先，用Photoshop软件分析一下这个标准九宫格的总体大小和每个格子的大小。

最终得出图片总大小为81px正方形，四个角的大小为27px的正方形，其余五个角也是27px。那么

div {

    margin-left:50px;

    margin-top:50px;

    width: 400px;

    height: 400px;

    background:green;

    border-image-source: url(border.png);

    border-image-width: 27px;      //红色方格的大小

    border-image-slice: 27;       //保证边角只切一个方格（红色方格）

    border-image-outset: 27px;    //该边框包围在div的外部

    border-image-repeat: round;   //除四角之外，中间部分的显示方式

}

四个角设定好之后，我们要设定四个变的显示排列方式。使用border-image-repeat属性，有四个值提供使用

stretch指定用拉伸方式填充边框背景图。默认值。

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

round指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小，直至正好可以铺满整个边框。

space指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距，直至正好可以铺满整个边框。

//拉伸方式填充，当然，通过上右下左设置四个边均可

border-image-repeat:stretch;

//平铺填充，超过则被截断

border-image-repeat:repeat;

//平铺填充，动态调整图片大小直至铺满

border-image-repeat:round;

//平铺填充，动态调整图片的间距直至铺满

border-image-repeat:space;

//另一个按钮的小例子

div{

    margin-left:50px;

    margin-top:50px;

    width: 200px;

    height: 40px;

    border-image-source: url(button.png);

    border-image-width: 10px;

    border-image-outset:10px;

    border-image-slice: 10 fill;

}

简写和版本

//border-image简写格式很简单，具体如下：

border-image：<'border-image-source'>||<'border-image-slice'>[/<'border-image-width'>|/<'border-image-width'>?/<'border-image-outset'>]?||<'border-image-repeat'>

//以上是手册上摘录的，转换成实际格式如下：

    margin-left:50px;

    margin-top:50px;

    width: 400px;

    height: 400px;

    background:green;

    border-image: url(border.png) 27/27px/27px round;

//兼容加上前缀

-webkit-border-image:url(border.png) 27/27px round;

-moz-border-image:url(border.png) 27/27px round;

-o-border-image:url(border.png)27/27px round;

border-image:url(border.png)  27/27px round