html5学习-CSS3-border-image属性

在CSS3中 border-image属性是规定包围div元素的边框，有空再解释下div元素

大致呢，我可以这样字设置：

1  div
2  {
3  - webkit - border - image : url(border.png)    round ; 
4  - o - border - image : url(border.png)    round ; 
5  border - image : url(border.png)    round ;
6  }

这个代码是W3cshool上的，我用chrome浏览器，那么他的引擎就是webkit的，所以第一行代码是正确的，假如是Opera那么第二行，如果是Firefox就应该是 -moz-border-image，我暂时没有尝试，好久没用过火狐了。

url()还是来选取图片，round是border-repeat的参数，可选的还一个stretch，效果图明天我再传，没时间写了，晚安

说一下它都有什么元素：

 

border-image 属性是一个简写属性，用于设置以下属性：

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

在这里假如不设定会用默认值:

none 100% 1 0 stretch

 

border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

copy from http://www.w3school.com.cn/cssref/pr_border-image.asp

然后呢，具体要慢慢尝试才知道效果，我还在尝试中，等到全都明白了再贴效果图。