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