css3.0抢先看(三)：border-image边框也能有背景图片

文章来自www.css3s.cn

css3.0中增加的 border-image属性，看起来似乎很像background-image，实际上它们确实类似。通过它可以定义四条边的背景图片，图片是平铺还是拉伸，定义的时候和定义div的背景图片差不多。噢，还可以定义边框四个角上的背景图片。当前的浏览器就Safari 3支持，具体代码如下：

• border-image:  /*  定义边框背景  */
  
  • border-top-image
  • border-right-image
  • border-bottom-image
  • border-left-image

• border-corner-image:  /*  定义边角背景  */
  • border-top-left-image
  • border-top-right-image
  • border-bottom-left-image
  • border-bottom-right-image

-webkit-border-image: url(border.png) 27 27 27 27 round round;

由于需要图片，所以效果就免了。
说明：
url(border.png) ：图片地址；
27 27 27 27：上 右 下 左 四条边框的宽度；
round round;round是表示重复平铺，若想把背景变成拉伸，可用stretch代替ground

文章来自www.css3s.cn