css3 border-image CSS3 border-image-repeat 属性

css3 border-image

CSS3 的 border-image 属性可以让我们使用图片来替代传统的边框，它可以让我们创建出更加丰富多彩的边框效果。

border-image 属性是一个复合属性，它由四个子属性组成：border-image-source、border-image-slice、border-image-width 和 border-image-outset。

border-image: source slice width outset; 

其中，border-image-source 是必须的，它用于指定要使用的图片。而 border-image-slice 用于指定图片分割的位置，可以是一个数字或者是一个关键字。如果使用数字，则表示将图片水平和垂直方向上都分割成相同大小的区块。如果使用关键字，则表示将图片水平方向上分割成不同大小的区块（top、right、bottom 和 left）。

 
border-image: url(images/border.png) 30 30 round; 

而 border-image-width 用于控制边框的宽度（也就是说可以将原本 1px 的边框扩大到 10px 或者 20px 等等）。最后 border-image-outset 用于设置图片在边界之外的位置。

 
border: 10px solid;     
border-image: url(images/border.png) 30 30 round;     
 

此外还有一个 repeat 关键字可以用来重复显示图片（stretch 默认情况下会将图片伸展开来适应被应用元素的大小）。例如 repeat 是水平方向上重复显示图片 repeat ；repeat y 是垂直方向上重复显示图片 repeat ；repeat xy 是水平方向上和垂直方向上都重复显示图片 repeat 。

 
border: 10px solid;     
border-image: url(images/border.png) 30 30 round repeat;     											    
CSS3 border-image-repeat 属性
CSS3 border-image-repeat 属性

实例
设置重复图像的方式：
div{
   border-image-source: url(border.png);
   border-image-repeat: repeat;
}

定义和使用
border-image-repeat 属性用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）。
提示:你可以查看 border-image 属性(简写属性用于设置所有 border-image-* 属性)。 
默认值:
stretch
继承性:
no
动画:
no. 查看 animatable
版本:
CSS3
JavaScript 语法:
object.style.borderImageRepeat="round"尝试一下

浏览器支持
表格中的数字表示支持该事件的第一个浏览器的版本号。
属性
 
 
 
 
 
border-image-repeat
15.0
11.0
15.0
6.0
15.0

CSS 语法
border-image-repeat: stretch|repeat|round|initial|inherit;
注意： 该属性规定如何延展和铺排边框图像的边缘和中间部分。因此，您可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。
属性值
值
描述
实例
stretch
默认值。拉伸图像来填充区域
查看实例 »
repeat
平铺（repeated）图像来填充区域。
查看实例 »
round
类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
查看实例 »
space
类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围
 
initial
将此属性设置为默认值。查看 initial
查看实例 »
inherit
从父元素中继承该属性。 查看 inherit
 

相关页面
CSS3 教程: CSS3 边框
CSS 参考手册: border-image 属性
CSS 参考手册: border-image-repeat 属性
CSS 参考手册: border-image-slice 属性
CSS 参考手册: border-image-source 属性
CSS 参考手册: border-image-width 属性
HTML DOM 参考手册: borderImageRepeat 属性