图像边框 border-image属性

border-image 属性最简单的使用方法以下所示：

border-image:url( 图像文件的路径) A B C D 

-webkit-border-image:url( 图像文件的路径) A B C D 

-moz-border-image:url( 图像文件的路径) A B C D

第一个参数为边框所使用的图像文件的路径，A B C D 四个参数标示当浏览器自动把边框所使用到的图像进行分割时上边距、右边距、下边距及左边距。

也能够指定边框宽度：

border-image:url( 图像文件的路径) A B C D /border-width

border-width表示边框的宽度，固然也能够四个边框不同宽，写四个值分别对应左上右下边

也能够设置四个边中图像的显示方法

border-image:url( 图像文件的路径) A B C D /border-width  topbottom leftright

topbottom 表示元素上下两条边中图像的显示方法

leftright 表示元素的左右两条边的显示方法

在显示方法中能够指定值为 repeat stretch round 三种

repeat：图像将以平铺的方式进行显示

stretch：图像将以拉伸的方式进行显示（四条边中的图像均已拉伸方式显示，中间的图像也以拉伸的方式显示）

repeat+stretch：上下边平铺，左右边拉伸

round：与将显示方法指定为 repeat 时相似，都是平铺，只是最后显示的一幅图不能彻底显示的时候，不超过图像的一半则舍去，前面的扩大；若是超过一半，则彻底显示，前面的压缩

在使用 border-image 属性的时候，仍然能够正常使用背景图像，可是为了避免让边框图像挡住背景图像，须要使用中间为透明的边框图像，不然背景图像就有可能被边框图像的中间挡住。