/ border-image

css3笔记——border-image-slice属性介绍以及各个浏览器的不同呈现

在css3中新增了border-image属性,用来定义边框的背景,它有很多的子属性,比较难理解与操作的便是border-image-slice属性,border-image-slice定义了如如何slice背景图像,使之以不同的方式装饰边框。

borde-image-slice属性值比较特殊,也是需要小心控制的地方。

  • 属性值不带单位,默认为px。
  • 支持百分比值。百分比值是相对背景图的大小,譬如widthheight的背景图,设置slice属性为10%后,其实际的属性值为height10%  width10%   height10%  width*10%
  • 其工作的原理可以理解为:首先根据四个属性值a b c d按顺时针方向确定四个点(ad左上A点、ab右上B点、bc右下C点、cd坐下D点),然后再根据box的大小,将背景图根据A、B、C、D四个点缩放或者拉伸至box的四个角,最后在根据border-width的值确定边框的粗细。
  • 属性的四个值的大小(a+c相对于背景图height的大小、b+d相对于背景图width的大小)对边框的呈现有很大的关系,不同情况会有不一样的呈现(由下面的demo以及图列也能看出一二),可从上条的工作原理深入理解,特别注意极限的情况(有点数学的味道)。当然多变带来出彩~^~
  1. 在实际应用的时候其css代码可以这样书写:

-webkit-border-image:url(slice.png) a b c d ; /兼容webkit引擎/ -moz-border-image:url(slice.png)   a b c d ;  /兼容gecko引擎/ -o-border-image:url(slice.png)  a b c d ;  /兼容presto引擎/ border-image:url(slice.png)  a b c d ;   /兼容标准的用法/

  1. 不同浏览器的差异

首先看这个demo(下面的图都来自于demo)

a.如果你看到空白页面,很是遗憾ie系列的浏览器并不支持border-image属性,不知道到了ie10会不会支持。

b.其他内核的浏览器对border-image-slice在其私有前缀下的解释基本相同,如图

[![border-image-slice在不同浏览器中的效果](http://hiwcc.b0.upaiyun.com/05c6e78e2d20_14052/a75f398f1c1a460faa8f6d99d4a5cf5d_thumbbe562b36-07d5-4d62-8164-80d0c752513d.jpg "border-image-slice在不同浏览器中的效果")](http://hiwcc.b0.upaiyun.com/05c6e78e2d20_14052/a75f398f1c1a460faa8f6d99d4a5cf5d.jpg)border-image-slice在不同浏览器中的效果
c.FF和Opera对border-image并不解释,但是Chrome却对其解释并且解释很是“标准”,而且如果你的css3代码中有标准的写法,Chrome会选择解释标准的border-image。
[![Chrome对border-image-slice的解析](http://hiwcc.b0.upaiyun.com/05c6e78e2d20_14052/8653b89b671443449a59e6ed7f795e9b_thumb09dc6f6d-4de4-4121-aa8f-599fbf3de8b9.jpg "Chrome对border-image-slice的解析")](http://hiwcc.b0.upaiyun.com/05c6e78e2d20_14052/8653b89b671443449a59e6ed7f795e9b61979b21-8e3f-4eaf-8f83-b9acb7ef1236.jpg)Chrome对border-image-slice的解析
由上图可以看出box内部的部分全部被清空这样看着更加像是一个边框。

d.因为偶尔也会用用金山的猎豹浏览器,以前一位同时webkit内核的浏览器,应该会跟Chrome很“神似”,但是今天才发现,两个浏览器还是不一样的。

[![猎豹浏览器对border-image-slice的解析](http://hiwcc.b0.upaiyun.com/05c6e78e2d20_14052/7eb184bd19c2462d994ef7763e2ce5a5_thumb4394a7ee-4aa7-4f22-b508-dd2964b51996.jpg "猎豹浏览器对border-image-slice的解析")](http://hiwcc.b0.upaiyun.com/05c6e78e2d20_14052/7eb184bd19c2462d994ef7763e2ce5a57c0b1581-e4b8-426d-beb1-925d2956c082.jpg)猎豹浏览器对border-image-slice的解析
当borde-image-slice 属性值中a+c或b+d的值大于背景图的尺寸后,同样是webkit内核浏览器,Chrome和猎豹浏览器解释不同的,猎豹浏览器的解释更加倾向于从一个边框的角度去渲染呈现,而其他浏览器的呈现方式则有点死板。而且在猎豹浏览器中无论是对私有前缀-webkit和标准模式下的解释都是一样的。

e.最后说说border-image的另一个子属性repeat在标准模式下和浏览器私有属性的不同解释

[![border-imgae-repeat的不同解析](http://hiwcc.b0.upaiyun.com/05c6e78e2d20_14052/0b6f5f602ee84f9da65a5ac319bbd0f6_thumbd6048722-470e-4cef-a922-11ecbbc38a23.jpg "border-imgae-repeat的不同解析")](http://hiwcc.b0.upaiyun.com/05c6e78e2d20_14052/0b6f5f602ee84f9da65a5ac319bbd0f62a709f49-1ba2-4761-9dc7-b4f6cb534ec1.jpg)border-imgae-repeat的不同解析
上图中前者是在border-image:url(slice1.png) 27 9 27 27 repeat;下的效果,后者是-webkit(-moz/-o)-border-image:url(slice1.png) 27 9 27 27 repeat;下的效果,可以看出,各个浏览器私有属性中其repeat是从中间开始的,而在标准的css3代码下,只是repeat边框部分。