CSS3中border-image属性详解

转载

mb5ff592e69e4d8 2013-08-09 17:04:00

文章标签 背景图片 html css css3 实线 文章分类 代码人生

border-images可以说也是CSS3中的重量级属性，如同圆角、边框颜色属性border-color、块阴影属性一样，也是属于边框属性中的一员。

从其字面意思上看，我们可以理解为“边框-图片”，通俗的说也就是使用图片作为(对象的)边框，这样一来边框的样式就不像以前那样只有实线、虚线、点状线...那样单调了，下面我们就来具体看一下应该怎样使用它。

首先我们来看一下与border-image相关的一些属性，有border-image-source、border-image-slice、border-image-repeat，其实就如同background属性一样有background-color、background-image、background-repeat等与它相关。以前background属性可以分别设置颜色、背景、背景位置...，也可以把这些样式写在一块；当然在这里Border Image的样式可以分别设置也可以写在一块(具体怎么写，在后边会有介绍)。

首先，我们来看一下border-image-souce属性，它就像background-image一样，也采用url()作为它的值，语法：

[border-image-source:url();]

对于border-image-slice属性，其实就是对图片的切割，那么现在我们引入一张图片

图片命名为：borderimage.png

border-image-slice可以取1-4个值，它就像border-width一样，它的几个值遵循上、右、下、左(top、right、bottom、left)的原则，但这几个值是不能带单位的，可以取数字或百分比，当取数字时默认单位为像素(px)。刚才我们提到了切割，那么它是怎么切割的呢？假如取四个值10 15 30 20，那么切割图如下：

加个边框

看，像不像9宫格呢？其实border-image-slice就是把边框图片分为了9个部分，假如改属性取一个值30，那么就把边框图片分成了9等份。

那么现在用代码实现一下试试效果：

1 2 3 4 5 6 7 8 9	`.div``1``{` `width``:``200px``;` `height``:``100px``;` `-moz-border-image:``url``(borderimage.png)` `30``;` `-webkit-border-image:``url``(borderimage.png)` `30``;` `-o-border-image:``url``(borderimage.png)` `30``;` `border-image:``url``(borderimage.png)` `30``;` `border-width``:``30px``;` `}`

效果：

再看一下这个图

其实1、3、7、9部分好像没有发生大的变化，它们仍然分布在四个角上，而2、4、6、8部分却发生了变化，它们看起来是被拉伸了。

其实我们可以这样理解，根据上图与前面效果图的对比，四个角是没有任何展示效果的，不会平铺也不会拉伸，因此我们可以把它们称作盲区。而border-top-image,border-right-image,border-bottom-image,border-left-image这几个部分才是要展示的，向前面的效果图一样，被拉伸了。对与这种现象，它是由border-image-repeat属性决定的，那么下面我们就看看它有哪些参数。

border-image-repeat属性共有3个值：stretch(拉伸)、repeat(重复)、round(平铺)，其中stretch是默认值。在使用时可以取1到2个参数，比如：

1	`border-image:``url``(borderimage.png)` `30``;`

就等同于

1	`border-image:``url``(borderimage.png)` `30` `stretch stretch;`

表示水平方向和垂直方向均使用stretch参数，即水平方向和垂直方向都拉伸。

如果是：

1	`border-image:``url``(borderimage.png)` `30` `round` `repeat``;`

则边框图片在水平方向上平铺，在垂直方向上重复。

对于stretch（拉伸）在前面有个例子，这里就不在多说了，下面我们就详细的区分一下round和repeat。

round的效果

测试代码：

1 2 3 4 5 6 7 8 9	`.div``1``{` `width``:``200px``;` `height``:``100px``;` `-moz-border-image:``url``(borderimage.png)` `30` `round;` `-webkit-border-image:``url``(borderimage.png)` `30` `round;` `-o-border-image:``url``(borderimage.png)` `30` `round;` `border-image:``url``(borderimage.png)` `30` `round;` `border-width``:``30px``;` `}`

显示效果：

我们可以看到浅色的菱形在水平方向和垂直方向上都平铺了，但它们始终是完整的菱形，就从宽度上来说吧，div的宽是200px，而每个菱形宽度为30px,通过计算200px的宽度大约只能放置6.7个菱形，但我们从图中看到，菱形都是完整的，这就说明菱形肯定变形了，再结合效果图，可以看到四个角的菱形没有变化，而浅色的菱形都变形了。由此我们可以得出结论：round平铺可能会改变边框背景图片大小来适应边框宽度排列。而repeat就不一样了，repeat重复是不改变背景图片大小而直接从中间向两端排列，下面就来验证一下。

repeat的效果

测试代码：

1 2 3 4 5 6 7 8 9	`.div``1``{` `width``:``200px``;` `height``:``100px``;` `-moz-border-image:``url``(borderimage.png)` `30` `repeat``;` `-webkit-border-image:``url``(borderimage.png)` `30` `repeat``;` `-o-border-image:``url``(borderimage.png)` `30` `repeat``;` `border-image:``url``(borderimage.png)` `30` `repeat``;` `border-width``:``30px``;` `}`

显示效果：

可以看到，有些菱形已经不完整了，因此repeat重复确实是不改变背景图片大小而直接从中间开始向两端排列，直到把空间占满为止。

注意：round效果和repeat效果在webkit内核下，如chrome浏览器里并区分不出来，效果是一样的。但在Opera 12.14里可以准确区分这两个参数。

下面我们就来两个DEMO练习一下吧

demo1:按钮制作

按钮图片

button.png

button-hover.png

html代码：

CSS代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21	`.btn``01``,.btn``02``{` `text-align``:``center``;` `font-family``:``Arial``;` `font-size``:``20px``;` `color``:``#fff``;` `text-decoration``:``none``;` `-moz-border-image:``url``(button.png)` `0` `15` `0` `15` `round;` `-webkit-border-image:``url``(button.png)` `0` `15` `0` `15` `round;` `-o-border-image:``url``(button.png)` `0` `15` `0` `15` `round;` `border-image:``url``(button.png)` `0` `15` `0` `15` `round;` `border-width``:``0` `15px``;` `padding``:``10px``;` `}` `.btn``01:``hover,.btn``02:``hover{` `color``:``#666``;` `-moz-border-image:``url``(button-hover.png)` `0` `15` `0` `15` `round;` `-webkit-border-image:``url``(button-hover.png)` `0` `15` `0` `15` `round;` `-o-border-image:``url``(button-hover.png)` `0` `15` `0` `15` `round;` `border-image:``url``(button-hover.png)` `0` `15` `0` `15` `round;` `}`

效果图如下：

鼠标划过第二个按钮时：

demo2：给照片加边框

这里有一张妹子的照片，还有一个小相框

girl.jpg

borderimage2.png

那么下面我们就给妹子加个相框:

HTML代码：

1 2 3	`<``div` `class``=``"img-girl-box"``>` `<``img` `src``=``"girl.jpg"` `class``=``"img-girl"``/>` `</``div``>`

CSS代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	`.img-girl-box{` `width``:``108px``;` `height``:``81px``;` `-moz-border-image:``url``(borderimage``2``.png)` `69` `124` `69` `124` `round;` `-webkit-border-image:``url``(borderimage``2``.png)` `69` `124` `69` `124` `round;` `-o-border-image:``url``(borderimage``2``.png)` `69` `124` `69` `124` `round;` `border-image:``url``(borderimage``2``.png)` `69` `124` `69` `124` `round;` `border-width``:``69px` `124px``;` `}` `.img-girl{` `position``:``absolute``;` `margin-top``:``-69px``;` `margin-left``:``-124px``;` `width``:``356px``;` `height``:``219px``;` `border``:``0``;` `z-index``:``-1``;` `}`