爱奇思

学习就是——从糊涂中慢慢走向清醒,然后再从清醒中慢慢走向糊涂,所以说我说它是一个O,只是圆的半径慢慢的扩大罢了!
posts - 60, comments - 128, trackbacks - 0, articles - 8
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

css3_快速弄明白border-image

Posted on 2010-06-21 11:20  牛牛博客  阅读(...)  评论(... 编辑 收藏

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

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

 

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

 

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

 代码

<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是怎么一回事了吧。

给大家 一些例子 练习

圆角

borderImage
border-width: 10px;
a source image to slice
border-image: url("media/roundedCorner.png") 20;


ninja!
border-width: 20px;
a source image to slice
border-image: url("media/border.png") 20;

Drop shadow

wooooosh
border-width: 10px;
a source image to slice
border-image: url("media/blackShadow.png") 5;

Tab

katanas
border-width: 15px 20px 0;
a source image to slice
border-image: url("media/tab.png") 20 20 0;


learn
to be
lazy
border-width: 10px 10px 0;
a source image to slice
border-image: url("media/gradient.png") 10 10 0;

多个按钮

hover & click
But not impossible.
a source image to slice a source image to slice a source image to slice
This one is tricky.

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

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