当前位置:首页 >> W3C标准>>

css3 border-image使用方法详解

Date::2011年04月18日 星期一 3:01 Comment:0 点击:633 views 作者::转播到腾讯微博

 

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

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

  css3 border image使用方法详解

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

  css3 border image使用方法详解

代码(呵呵!请不要急,继续向下看):

 

-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代码

 css3 border image使用方法详解 

也就是:

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

   css3 border image使用方法详解

 

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

  css3 border image使用方法详解

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

 

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

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

 

 css3 border image使用方法详解

标签:css图片圆角, css图片标签     类别:W3C标准

本文地址:css3 border-image使用方法详解
版权所有 © 转载时必须以链接形式注明作者和原始出处!出处!
分享到:

相关文章

共 0 条评论

No comment yet!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

把本站分享给您的好友

更多

赞助商信息

商业模板

推荐内容

热点内容