29.CSS3边框图片效果
第二十三章 CSS边框图片效果
一、属性解释
用几个属性就可以嵌入图片形式的边框。
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.
那么，第一步，先创建一个盒子区域，大小为400*400的矩形，然后设置引入边框图像。
//引入边框图像
border-image-source:url(border.png) //如果只有这句话，webkit引擎下的浏览器会在盒子区块的四个角看到
一丁点图像的影子，而其他浏览器什么也看不到，这是由于没有设置边框背景图片的宽度导致的。
//设置边框图像宽度，上右下左，可以设置四个值
border-image-width：81px; //这里设置的是边框图像的宽度，而不是边框宽度。当设置后，会发现文本会偏移，而边框图像的宽度不会积压文本。
//设置边框宽度
border-width：20px;
以上设置完毕后支持边框的浏览器会在四个角落铺上这张图片的完整形式。这个时候需要引入切割属性来配置来配置背景图片的显示方式
//首先，边框图像宽度设置为27px和一个单格宽高一致
border-image-width：27px;
//设置切割属性的大小
border-image-slice:27; //这里不需要设置px像素，因为它默认就是像素，
//从27逐步放大到81，四个角都慢慢缩小，各自显示一个完整的图像
border-image-slice:81;
//从27逐步缩小到0，发现四个角都慢慢变大，配合fill整体显示一个完整的图像
border-image-slice：0 fill;
//33.5%差不多是27
//上下设置27，左右设置0；
//向外扩张20px，也可以是浮点数，比如2.2；
四个角设好后，我们要设定四个点的显示排列方式。使用border-image-repeat属性，有四个值提供使用
属性 说明
stretch 指定用拉伸方式填充边框背景图，默认值。
repeat 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过，则被截断
** round 指定用平铺方式来填充边框背景图。图片就根据边框的尺寸动态调整图片大小，直至正好可以铺满整个边框
space 指定用平铺方式来填充边框背景图。图片就根据边框的尺寸动态调整图片之间间距，直至正好可以铺满整个边框
//拉伸方式填充，通过上右下左设置四个边均可
border-image-repeat;stretch;
//平铺填充，超过则被截断
border-image-repeat;repeat;
//平铺填充，动态调整图片大小直至铺满
border-image-repeat;round；
//平铺填满，动态调整图片间距直至铺满
border-image-repeat;space；
三、简写形式
border-image简写格式如下：
border-image:<'border-image-source'>||<'border-image-slice'>[/<'border-image-width'>]|/<'border-image-width'>?/<'border-image-outset'>]?||<'border-image-repeat'>
简写格式： border-image：url（border.png） 27/27/px round;
对于支持的版本如下
Opera Firefox Chrome IE Safari
部分支持需带前缀 11.5～12.1 3.5～14 4～14 3.1～5.1 无
支持需带前缀 无 无 无 无 无
支持不带前缀 15+ 15+ 15+ 6+ 11.0+
//兼容加上前缀
-webkit-border-image:url（border.png） 27/27/px round;
-moz--border-image:url（border.png） 27/27/px round;
-o-border-image:url（border.png） 27/27/px round;
border-image:url（border.png） 27/27/px round;
