html5学习-CSS3-border-image边框…

在div元素中使用图像边框时候需要设置。

首先说下：

border-image

-webkit-border-image

-o-border-image

这个前面的说的是用的什么浏览器引擎。我一般用chrome，那么就是webkit。

然后呢

border-image: url() A B C D;

这个就是设置边框的四条边的边距就是这四条边在自动分隔的时候所用的边距，ABCD，是上右下左顺序；

或者：

border-image:url() A B C D / border-width;

最后的加上了边框宽度值。

然后也可以这样子写：

border-image: url() A / border-width;

这样的话就是四条边的边距一样了。

最后：

border-image: url() A / border-width topbottom leftright;

其中示例代码：

1  <</span>style type="text/css">
2         div{
3             -webkit-border-image: url(./images/border.png) 18/7px stretch repeat;
4             width: 300px;
5             height: 200px;
6         }
7     </</span>style>

上面这段代码解释，url()为图片链接，然后边距18,宽度7，上下边框拉伸，左右边框重复。

效果：

然后大致就是这样。