QT之border-image属性

1、border-image的兼容性
border-image能够说是CSS3中的一员大将，未来必定会大放光彩，其应用潜力真的是很是的惊人。惋惜目前支持的浏览器有限，仅Firefox3.5，chrome浏览器，Safari3+支持border-image。因此，就本文而言，IE浏览器能够回家休息了，Firefox3及其如下以及Opera浏览器也能够休息去看《阿凡达》了。因此，本文提供的一些demo页面，要在Firefox3.5+，chrome或Safari3+浏览器下才能够看到效果。

2、熟悉border-image的一些特性
咱们可能对于CSS2中的background属性比较熟悉，例如：background:url(xx.jpg) 27px no-repeat;
指代的是图片(url(xx.jpg))，位置(27px)，重复性(no-repeat)。

border-image于此相似，border-image包括图片，剪裁位置（与background位置同样，也是数值，也支持百分值），重复性。例如：border-image:url(border.png) 27 repeat;，指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)。试着对比background，这有助于border-image属性的记忆。

具体描述border-image的参数
border-image的参数就是上面提到的三个：图片，剪裁位置，重复性。
一、图片(border-image-source)
与CSS2中background-image属性同样，border-image的背景图使用url()调用，图片能够是相对路径或是绝对路径，也能够不使用图片，即border-image:none;

二、图片剪裁位置(border-image-slice)
此参数特色比较鲜明：
一、没有单位，专指像素。这相似于flash的as脚本，舞台高宽，影片剪辑大小，位移直接就是一个数值，没有单位，由于默认单位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;这里的27专指27像素。

二、支持百分比值，百分比值大小事相对于边框图片而言，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。

三、剪裁特性。若是您对CSS中clip属性(clip:rect(auto, auto, auto, auto))比较了解，则这里理解就会轻松些。clip能够说是CSS中一个明目张胆的剪裁属性，而此处的属性虽然表意上不是剪裁，可是在border-image效果的实现上来讲，就好像是个剪裁工具，把边框图片四分五裂，再从新安置，变形。其有1~4个参数，其方位规则符合CSS广泛的方位规则（与margin，padding等或border-width一致），上右下左顺时针，再赋予剪裁的含义，举个简单的例子，前面提到，支持百分比宽度，因此这里“30% 35% 40% 30%的”示意能够用下图表示：

看图说话就是，离图片上部30%的地方剪裁一下，在右边35%的地方剪裁一下，在离底部40%的地方裁剪一下，在距左边30%的地方也剪裁一下。因而总共对图片进行了“四刀切”，造成了九个分离的区域，这就是九宫格，这是下面深刻讲解border-image的基础。

三、重复性(border-image-repeat)
这里的重复性有别于background的背景重复，差异较大。background图片就是重复，不重复，水平重复，垂直重复，总之就是围绕repeat（重复）这个词打转，一家独大。而对于border-image，可谓是三足鼎立，repeat（重复）只是其中之一，其他两个是round（平铺）和stretch（拉伸）。其中，stretch是默认值。

参数0~2个，0则使用默认值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1则表示水平方向及垂直方向均使用此参数；2个参数的话则第一个参数表水平方向，第二个参数表示垂直方向。例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平铺），垂直方向repeat（重复），至于何为平铺何为重复下面会深刻讲解。

3、深刻理解border-image的宽度和展现方式
分开理解border-image的宽度或是展现方式其实不太难的，关键是这二者结合使用时候的含义，须要花必定的功夫的理解。

帮助理解的九宫格模型
何为九宫格？为何咱们须要九宫格帮助理解？

“九宫格”是我国书法史上临帖写仿的一种界格，又叫“九方格”，即在纸上画出若干大方框，再于每一个方框内分出九个小方格，以便对照法帖范字的笔画部位进行练字。在本文，“九宫格”就专指由九个方格造成的矩形布局，例如左图就是一个很简单的数字九宫格。

border-image的数值参数实际上是用来剪裁边框图片的，正好“哗哗四刀”切出了个九宫格的模型，因此，有意或无心，巧合仍是必然，咱们须要用到九宫格模型帮助咱们理解border-image的绘制原理。下面这张图是本文很是重要的基本的示意图，由于这是张具备表明性的九宫格图案(27*3)*(27*3)。
<————————>

这张图可以帮助咱们更好的理解border-image的剪裁及绘制的原理。

边框将border-image分红了九部分：border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image以及中间的内容区域。假设如今边框的宽度是27像素，则上面所说的九部分正以下图所表示的（放大400%）：

左图中，橙红色的四个边角的菱形区域称为“角边框图片”，在border-image中，角边框图片是没有任何展现效果的，不会平铺，不会重复，也不会拉伸，有点相似于视觉中盲点的意思。

而对边的四个橙黄色区域属于展现效果的做用区（也是边框宽度计算剩余区），上下区域即border-top-image和border-bottom-image区域受到展现效果属性的第一个参数——水平方向效果影响：若是为repeat，则此区域图片会水平重复，若是是round，则此框框内的图片会水平平铺，若是是stretch，则此矩形域中的图片就会被水平拉伸。（下部分的实例会作具体演示）左右区域只有垂直方向上的效果，与上下区域效果对应，很少说。

中间的区域（左图的空白格）受到所有参数的做用，在水平和垂直两个维度上都有展现效果（平铺、拉伸等）。

border-image绘制原理简述
我是这样理解的：共存在两个九宫格，一个是边框图片，还有一个就是边框自己，九个方位关系一一对应。边框自己的特性让其变成了一个九宫格，四条边框交错，加上其围住的区域，正好造成一个九宫格。边框图片则是经过图片剪裁实现了九宫格。这是理解绘制原理的基础。

一、调用边框图片
border-image的url属性，经过相对或绝对路径连接图片。

二、边框图片的剪裁
border-image的数值参数剪裁边框图片，造成九宫格。

三、剪裁图片填充边框
边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，而后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。

四、执行重复属性 被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。