border-image

語法:

border-image<border-image-source> || <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? || <border-image-repeat>

爲了方便理解border-image的取值,可將border-image理解成由以下5個僞屬性組成:

  • border-image-source : none | <url>

    默認值none

    該屬性用于指定是否用圖像定義邊框樣式或圖像來源路徑。

  • border-image-slice : [ <number> | <percentage> ]{1,4} && fill?

    默認值100%

    該屬性用于指定對邊框背景圖的分割方式

    写本文档时尚无浏览器支持参数值 fill 关键字

  • border-image-width : [ <length> | <percentage> | <number> | auto ]{1,4}

    默認值1

    該屬性用于指定邊框寬度。該屬性可省略,由外部的border-width來定義

    寫本文檔時所有浏覽器只支持<length>類型的參數值

    也可以省略此屬性,在外部用border-width屬性來設置該值

  • border-image-outset : [ <length> | <number> ]{1,4}

    默認值0

    該屬性用于指定對邊框背景圖的擴展

    寫本文檔時尚無浏覽器支持該屬性

  • border-image-repeat : [ stretch | repeat | round | space ]{1,2}

    默認值stretch

    該屬性用于指定邊框背景圖的填充方式。可定義0-2個參數值,即水平和垂直方向。如果2個值相同,可合並成1個,表示水平和垂直方向都用相同的方式填充邊框背景圖;如果2個值都爲stretch,則可省略不寫。

    寫本文檔時Opera尚不支持該屬性,但卻默認使用了stretch的效果

取值:

none:
無背景圖片。
<url>
使用絕對或相對地址指定圖像。
<number>
用浮點數指定寬度。不允許負值。
<percentage>
用百分比指定寬度。不允許負值。
<length>
用長度值指定寬度。不允許負值。
stretch:
指定用拉伸方式來填充邊框背景圖。
repeat:
指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時,如果超過則被截斷。
round:
指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好可以鋪滿整個邊框。寫本文檔時僅Firefox能看到該效果

說明:

設置或檢索對象的邊框樣式使用圖像來填充。
  • 使用圖像替代border-style去定義邊框樣式。當border-image爲none或圖像不可見時,將會顯示border-style所定義的邊框樣式效果。
  • 對應的腳本特性爲borderImage

兼容性:

  • 淺綠 = 支持
  • 紅色 = 不支持
  • 墨綠 = 部分支持
  • 橙色 = 实验性质
支持版本\類型 IE Firefox Safari Chrome Opera
版本 6.0-10.0 4.0-9.0 5.1 13.0-16.0 11.50-11.60

寫法:

內核類型 寫法(border-image)
Webkit(Chrome/Safari) -webkit-border-image
Gecko(Firefox) -moz-border-image
Presto(Opera) -o-border-image
Trident(IE)  

示例: