• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > DIV&CSS >

css3 border-image使用说明

来源: www.dedecms8.com 编辑:织梦吧 时间:2011-04-14点击:

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

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

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ