border-image 詳解

border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>
<' border-image-source '>： 設置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑。
<' border-image-slice '>： 設置或檢索對象的邊框背景圖的分割方式。

border-image-slice：[ <number> | <percentage> ]{1,4} && fill? 默認值：100% 切割線的位置

該屬性指定從上，右，下，左方位來分隔圖像，將圖像分紅4個角，4條邊和中間區域共9份，中間區域始終是透明的（即沒圖像填充），除非加上關鍵字fill。

<number>： 用浮點數指定寬度。不容許負值。
<percentage>： 用百分比指定寬度。參照其包含塊區域進行計算。不容許負值。
fill： 保留裁減後的中間區域，其鋪排方式遵循 <' border-image-repeat '> 的設定。

<' border-image-width '>： 設置或檢索對象的邊框厚度。
border-image-width：[ <length> | <percentage> | <number> | auto ]{1,4}
<' border-image-outset '>： 設置或檢索對象的邊框背景圖的擴展。

border-image-outset：[ <length> | <number> ]{1,4} 不容許負值。
該屬性用於指定邊框圖像向外擴展所定義的數值，即若是值爲10px，則圖像在本來的基礎上往外延展10px再顯示。
對應的腳本特性爲borderImageOutset。

<' border-image-repeat '>： 設置或檢索對象的邊框圖像的平鋪方式。默認stretch
border-image-repeat：[ stretch | repeat | round | space ]{1,2}

stretch： 指定用拉伸方式來填充邊框背景圖。 repeat： 指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時，若是超過則被截斷。 round： 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好能夠鋪滿整個邊框。 space： 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的之間的間距直至正好能夠鋪滿整個邊框。 可定義0-2個參數值，即水平和垂直方向。若是2個值相同，可合併成1個，表示水平和垂直方向都用相同的方式填充邊框背景圖；若是2個值都爲stretch，則可省略不寫。