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;

在safari3+和FF3.5,chrome5.0+,opera10.53浏览器里能看到边框背景图

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

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

　　none：

　　默认值。无背景图。

　　使用绝对或相对 url 地址指定背景图像。

　　：

　　边框宽度用固定像素值表示。

　　：

　　边框宽度用百分比表示。

　　[ stretch | repeat | round ]：

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

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

　　也就是：

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

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

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

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

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

标签: css3

首页