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 ;   /兼容标准的用法/

2) 不同浏览器的差异

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

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

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

border-image-slice在不同浏览器中的效果border-image-slice在不同浏览器中的效果

c.FF和Opera对border-image并不解释,但是Chrome却对其解释并且解释很是“标准”,而且如果你的css3代码中有标准的写法,Chrome会选择解释标准的border-image。

Chrome对border-image-slice的解析Chrome对border-image-slice的解析

由上图可以看出box内部的部分全部被清空这样看着更加像是一个边框。

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

猎豹浏览器对border-image-slice的解析猎豹浏览器对border-image-slice的解析

当borde-image-slice 属性值中a+c或b+d的值大于背景图的尺寸后,同样是webkit内核浏览器,Chrome和猎豹浏览器解释不同的,猎豹浏览器的解释更加倾向于从一个边框的角度去渲染呈现,而其他浏览器的呈现方式则有点死板。而且在猎豹浏览器中无论是对私有前缀-webkit和标准模式下的解释都是一样的。

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

border-imgae-repeat的不同解析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边框部分。

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus