CSS3新增加的一些内容之边框和渐变

-------------------- 

 边框图片

  1.border-image-source:url（）

   覆盖原有的边框颜色（几乎和所有的img一样）。img在四个角落“全景显示”。也可以简写成border-image:url()。

 

  2.border-image-slice:70 70 70 70 （上右下左）

 数字70后不带单位（少见但不特殊），四个数字分别代表的是从（传统的）上右下左方向各画出一条“分割线”，将“image”变成“九宫格”。九宫格除了最中间的一格外，其余的“分摊”在各个角落或者边框内（4个点4条边框）。-----由以上的这个分配策略可以看出来，1.中间的一格暂时没有显示出来;  2. 在确定了4个“角落”的具体的大小之后，4条边框不一定能”正好”显示原有的"imgage"相对应的位置的大小，因此可以有2个策略：等比拉伸/缩小  或者  部分显示。

要想将中间的一格显示出来，可以在最後面再带一个参数，变成:

border-image-slice:70 70 70 70 fill （简写成border-image-slice:70 fill）。这样一来，“边框属性”变成“背景图”了。这也是一种操作“背景图”的方法

 

3.border-image-repeat:stretch/repeat/round

"border-image-repeat"这里指的是四条边框对应的图像是否拉升。具体的见上方关于“......2. 在确定了4个“角落”的具体的大小之后，4条边框不一定能”正好”显示原有的"imgage"相对应的位置的大小，因此可以有2个策略：等比拉伸/缩小  或者  部分显示”的描述。四个角落是不会被拉升的。其中，参数“stretch”代表的是等比拉升/缩小的策略；参数“repeat”,表示在四条边框上“重复”显示，直到铺满整个边框，若在铺满边框的首尾处出现无法完整显示1个repeat单元的时候，则采取“部分显示”的策略；参数"round"，repeat与“等比拉升/缩小”的复合体，这个参数比较奇葩，因为你将一个repeat单元拉升还是将多个repeat单元拉升是由底层代码“智能”决定的（“智能”:在保证每一个repeat单元不被拉升变形的情况下，尽可能多的显示完整的repeat，剩余的不够显示1个完整的repeat单元则“富裕”部分，将富裕部分平均分配到已经计算好数量的多个repeat中）。默认取值为“stretch”。

 

4.border-image-width:通常小于border的width

不常用。

 

5.border-image-outset: 50px 70px 60px 90px;

整体等比拉伸，而非整体移动。这种策略使得每个边框都可以独自设定，而不必受到牵制。

 

6.简写

与border+,backgound+这些类似，border-image-xxx也有简写方式，他的简写方式就是border-image,

border-image:url    九宫格的划分方法（border-image-slice）    是否等比拉伸/是否重复（repeat） ;

 

代码总结如下：

                  /* 缩写模式，简单容易记，你值得拥有！ */
                  border-image: url(images/border.jpg) 70 stretch;

                  /* 相对于边框而言，是种不对称的拉升，不是整体的“移动”，整体移动会导致
某一个方位的设置无法自我确定。*/
                  border-image-outset: 50px 70px 60px 90px;

                  border-image: url(images/border.jpg);
                  border-image-slice: 70;


                  /* 默认取值为stretch,等比拉升或者缩小 */
                  border-image-repeat: stretch;

                  /* 单元重复，不足一个单元部分显示 */
                  border-image-repeat: repeat;

                  /* 在尽可能多的显示原生的repeat单元的之后，剩余部分计算出来之后，
   等比拉升（没有缩小）repeat单元 */
                  border-image-repeat: round;

----------------------------------------