css3 border-image使用说明

猫性男孩

在看这个属性时，好像国内的文章都没给大家说太明白，今天就一起说说

首先来一个素材图片whiteButton.png

然后我们要做成这样的效果：

代码（呵呵！请不要急，继续向下看）：

-moz-border-image: url(images/whiteButton.png) 0 12 0 12 round stretch;
border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;
display: block;
width:600px;
border-width:0 12px;
padding:10px;
text-align: center;
font-size: 16px;
text-decoration: inherit;


<div style="-webkit-border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;
-moz-border-image: url(images/whiteButton.png) 0 12 0 12 round stretch;
border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;
display: block;
width:600px;
border-width:0 12px;
padding:10px;
text-align: center;
font-size: 16px;
text-decoration: inherit;
color:white;+color:black;">在safari3+和FF3.5,chrome5.0+,opera10.53浏览器里能看到边框背景图</div>

下面我们来讲一下基本知识：

一。定义： border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

none：默认值。无背景图。<image>：使用绝对或相对 url 地址指定背景图像。

<number>：

边框宽度用固定像素值表示。<percentage>：边框宽度用百分比表示。[ stretch | repeat | round ]：

拉伸 | 重复 | 平铺 (其中stretch是默认值。)

请看下图平剖析一下css代码

也就是：

他们把图片，用#的方式截取，然后用 stretch | repeat | round 来控制水平或垂直的效果。看看下图你就明白了

  

当然关于边框的宽度你也可以用%;其原理也是一样：

到这  大家应该弄明白border-image是怎么一回事了吧。

参考文档：www.lrbabe.com/sdoms/borderImage/

ejohn.org/blog/border-image-in-firefox/

光明使者

楼主,不好意思,我太孤陋寡闻了.竟从来没见过css属性前面+color有加号.....
结果试了一下"不行"
楼主有没有自己试过?

猫性男孩

光明使者 发表于 2013-3-15 11:09
楼主,不好意思,我太孤陋寡闻了.竟从来没见过css属性前面+color有加号.....
结果试了 ...

试过，ie无反应，火狐无反应，谷歌还行

光明使者

猫性男孩 发表于 2013-3-15 11:12
试过，ie无反应，火狐无反应，谷歌还行

呵呵呵呵呵呵呵呵呵呵~~~~~{:soso_e100:}{:soso_e100:}{:soso_e100:}