当前位置:首页 > DIV+CSS教程 > 正文

css3 border-image使用说明

作者: 来源:脚本之家 【 】 浏览: 修改日期:2011-03-08 我要评论(5)     

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

首先来一个素材图片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/ 

 

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: css3 border-image

更多评论(5)..会员评论

stonehah(221.226.*.*) 发表于:2013-06-20 10:30:33
还是没搞懂,既然上下边框都设置为0了,为什么div的上下边框还能显示出来呢
onet(59.50.*.*) 发表于:2011-08-22 19:42:09
我在IE下测试怎么实现不了的?
leeleewc(183.3.*.*) 发表于:2011-04-11 23:15:14
马克,说真得很好了,以后继续关注~~
管理员回复:欢迎
read(182.91.*.*) 发表于:2011-03-16 23:16:25
不错的发现啊,一直没有发现这个东东,虽然IE下面有能实现
管理员回复:是呀,太好的功能了
kevinyi0219(60.29.*.*) 发表于:2011-03-11 17:42:21
悲剧的是不支持ie

出差旅游免费预订酒店

【视频教程】新手常见问题