css3 border-image使用说明
作者: 来源:脚本之家 【大 中 小】 浏览: 修改日期：2011-03-08 我要评论(4)
在看这个属性时，好像国内的文章都没给大家说太明白，今天就一起说说
首先来一个素材图片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}
<number>：
拉伸 | 重复 | 平铺 (其中stretch是默认值。)
请看下图平剖析一下css代码
也就是：
他们把图片，用#的方式截取，然后用 stretch | repeat | round 来控制水平或垂直的效果。看看下图你就明白了
当然关于边框的宽度你也可以用%;其原理也是一样：
到这 大家应该弄明白border-image是怎么一回事了吧。
（如果您觉得本站不错，请告诉身边的朋友，或转载到论坛、百度知道、贴吧等，记得带网址哟，不胜感激！）
〖DIV+CSS教程〗Tags: css3 border-image
相关文章
更多评论(4)..会员评论
- 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
推荐文章
热门文章
最新图片素材
最新评论文章
推荐专题
在线交流QQ群
- 106310407(开)
- 55427134(开)
- 2993401(开)
- 30235673(开)
- 33424604(开)
- 2993401(开)
- 161512108(开)
- 161510519(开)
- 158375021(开)
- 155858414(开)
- 143309878(开)
- 16373807(开)
- 129098721(开)
- 123473199(开)
- 146991009(开)
- 135792800(开)