一、border-image的兼容性

二、border-image的參數（包括圖片、裁剪位置、重復性）

? ? ? ?1、圖片（border-image-source）采用url（）調用，可以是相對/絕對路徑 ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? 2、圖片的裁剪位置（border-image-slice） ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???

? ? ? ? ? ? 1>參數沒有單位，專指像素。border-image：url（a.png）27 repeat; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 這里27指27px ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???

? ? ? ? ? ? ?2>支持百分比，百分比大小相對于邊框圖片而言 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ?3>裁剪特性，效果的實現上類似于九宮格裁剪，有1~4個參數，方位符合CSS普遍的方位規(guī)則（上右下左，順時針） ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?border-image：url（border.png）30 % ?35% 40% ?30% ?repeat; ? ? ? ? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

在圖片上部30%的地方裁剪一下，在右部35%的地方裁剪一下，在底部40%的地方裁剪一下，在左部30%的地方裁剪一下。形成了九個分離區(qū)域——九宮格

? ? ?3、重復性（border-image-repeat）參數0~2個，2個參數一個水平，一個垂直

? ? ? ? ? ? 這里重復與background的背景重復，差異較大。background圖片的重復包括：重復、不重復、水平重復、垂直重復。對于border-image而言包括：repeat（重復）、round（平鋪）、stretch（拉伸），其中stretch是默認值。

三、應用

使用的圖片

四、參考內容

1、http://www.zhangxinxu.com/wordpress/?p=518

2、http://www.w3school.com.cn/cssref/pr_border-image.asp