边框图像

1.border-image属性最简单的使用方法

border-image属性最简单的使用方法如下所示。

border-image:url(图像文件的路径) A B C D

-webkit-border-image：url(图像文件的路径) A B C D

-moz-border-image：url(图像文件的路径) A B C D

border-image属性值中至少必须指定五个参数，其中第一个参数为边框所使用的图像文件的路径，A、B、C、D四个参数表示当浏览器自动把边框所使用到的图像进行分隔时的上边距、右边距、下边距及左边距。如下图1图示的方法对这四个参数进行了说明。

 

接下来，让我们看一下如果在border-image属性值中指定了这四个参数，浏览器对于边框所使用的图像是如何进行分割的。

首先，当在样式代码中书写如下所示的代码时，浏览器对于边框所使用的图像分割方法如图2所示。

border-image：url(...) 18 18 18 18

-webkit-border-image:url(...) 18 18 18 18

border-image:url(...) 18 18 18 18

如图中所示，图像被自动分割为9部分。分割后的图像在CSS3中的名称如表所示

• border-top-left-image / border-top-image / border-top-right
• border-left-image / / border-right-image
• border-bottom-left-image / border-bottom-image / border-bottom-right-image

下面示例代码，可以看出浏览器是如何将分割图像显示在一个边框宽度为5px的div元素中。

1. .wrap{
2. border:solid 5px;
3. border-image:url(...) 18 18 18 18;
4. -webkit-border-image:url(...) 18 18 18 18;
5. -moz-border-image:url(...) 18 18 18 18;
6. width:300px;
7. }

2.使用border-image属性来指定边框宽度

在CSS3中，除了可以使用border或border-width属性指定边框的宽度外，使用border-image属性同样可以指定边框的宽度，方法如下：

border-image: url('图像文件路径') A B C D/border-width

样式代码如下：

1. .wrap {
2.    border:solid;
3. border-image:url(...) 18 18 18 18/18px ;
4. -webkit-border-image:url(...) 18 18 18 18/18px;
5. -moz-border-image:url(...) 18 18 18 18/18px;
6. width:300px;
7. }

另外，在上述代码中A、B、C和D四个参数只指定了一个参数18px，这是因为CSS3中，如果此处的四个参数完全相同，可以只写一个参数，将其他三个参数省略。

border-image:url(...) 18/5px 10px 15px 20px ;

3.中央图像自动拉伸

浏览器将边框所用图像自动分割为9部分后，除了将border-top-image、border-left-image、border-right-image、border-bottom-image这4部分自动分配为四条边所用的图像之外，将位于中间部分的图像分配给元素边框包围的中间区域，随着div元素的内容变化的同时，或者在样式代码中修改div元素的宽度或高度的同时，中间部分的图像也会自动进行伸缩，以填满该中间区域。

样式代码如下：

1. .wrap {
2.    border: solid;
3.    border-image:url(...) 18/5px;
4. -webkit-border-image:url(...) 18/5px ;
5. -moz-border-image:url(...) 18/5px ;
6. width:300px;
7. ｝

 

4.绘制四个角不同半径的圆角边框

可以在border-image属性中指定元素四条边中的图像是以拉伸的方式显示，还是以平铺的方式显示，指定方法如下所示。

1. border-image: url(文件路径) A B C D/border-width topbottom leftright

其中,topbottom表示元素的上下两条边中图像的显示方法，leftright表示元素的左右两条边中的显示方法。在显示方法中可以指定的值为repeat、stretch、round三种。

repeat

将显示方法指定为repeat时，图像将以平铺的方式进行显示。示例代码：

1. .wrap {
2. border-image:url(...) 18/5px repeat repeat;
3. -webkit-border-image:url(...) 18/5px repeat repeat;
4. -moz-border-image:url(...) 18/5px repeat repeat;
5. }

stretch

将显示方法指定为stretch时，图像将以拉伸的方式进行显示。

repeat+stretch

将显示方法指定为repeat+stretch时，图像将以平铺方式和拉伸方式结合使用。示例如下：

1. .wrap {
2. border-image:url(...) 18/5px repeat stretch;
3. -webkit-border-image:url(...) 18/5px repeat stretch;
4. -moz-border-image:url(...) 18/5px repeat stretch;
5. }

round

将显示方法指定为round时与将显示指定为repeat类似。

5.使用背景图像

在使用border-image属性的时候，仍然可以正常使用背景图像，但是为了不让边框图像挡住背景图像，需要使用中间为透明的边框图像，否则背景图像就有可能被边框图像的中央部分挡住部分或全体了。

1. .wrap {
2. -moz-border-image: url(...) 22 round;
3. -webkit-border-image: url(...) 22 round;
4. -o-border-image: url(...) 22 round;
5. border-image: url(...) 22 round;
6. display: inline-block;
7. border- 22px;
8. }