边框图片知识

一、什么是边框图片

为了实现丰富多彩的边框效果，在css3中，新增了 border-image属性，这个新增属性允许指定一副图像作为元素的边框。

二、边框图片的切片原理

最主要是把四个角切出去，利用井字型来把四个角切出去，一定要保留四个角的完整性，顺序是：上 右 下 左；

如图：

 三、使用及语法规范

1、边框图片资源地址

语法：border-image-source: url("images/border.jpg");

2、 裁剪尺寸（上 右 下 左）单位默认px，可使用百分百

语法：border-image-slice: 28 28 28 28;

3、 边框图片的宽度，默认边框的宽度

语法：border-image-width: 20px;

4、 平铺方式

stretch 拉伸（默认）

语法：border-image-repeat: stretch ;

 图示：

 

 repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片

语法： border-image-repeat: repeat ;

图示：

 round 环绕，是完整的使用切割后的图片进行平铺

 语法： border-image-repeat: round ;

图示：

 

 5、组合写法

语法：border-image: url("images/border.jpg") 167/20px round;

四、使用技巧 

1、书写css边框border的大小是边框图片的显示范围

2、在使用变宽图片时，建议使用子绝夫相的方式在设置边框图片的盒子里在添加一个绝对定位的盒子用来书写内容，因为由于保持边框四角完整性原则，一些图片四角需要切割的大小不同，导致九宫格切割处理中间部分不居中，可能不是我们书写内容想要的位置。通过给position：absolute；中的top、right、bottom、left设置一个与四个切割方向相同的负值，就可以得到与相对定位盒子（父盒子）同等大小的盒子，再给这个盒子一个和父盒子边框宽度相同的padding值就可以得到一个完美的装内容的盒子