一、瀏覽器對它的支持
Firefox3.5-Firefox15 需要加-moz-前綴
Firefox15以上 同樣支持-moz-前綴的css代碼,但是必須在css代碼中加入border-style:solid;否則不會看到效果。
Chrome1.1.x以上 需要加前綴-webkit-
Safari3.1以上 需要加前綴-webkit-
Opera瀏覽器 需要加前綴-o-
較新版本的Chrome,Firefox及Webkit內核的opera 支持w3標准,可以不加前綴。
IE瀏覽器 支持效果不好,IE11可以支持。
二、border-image的參數
border-image-source:url('') 圖片的路徑
border-image-slice 圖片的裁切方式,4個參數可以是像素值,也可以是百分比。順序為上,右,下,左。
border-image-width 邊框的寬度, 順序為上,右,下,左。
border-image-outset 邊框偏移基准位置的像素值,默認為0,
border-image-repeat 裁切后圖片的填充方式,可選stretch/repeat/round,分別為拉伸,重復,平鋪,默認值為stretch,順序為:上下,左右。
三、對參數進行解析
border-image-slice 圖片的裁切方式,4個參數可以是像素值,也可以是百分比。順序為上,右,下,左。
border-image-slice:33% 33% 33% 33%或則border-image-slice:33%。
把一張圖片進行切割,按照上面的百分比來切割。通過上面的四個百分比可以把一張圖片切割成9部分,然后把其中外部的八部分按照填充方式進行填充到邊框上的相應位置。如果邊框有一定的寬度,那么四條邊和與之包含的內容的組合也是一個九宮格。
border-image-outset:50px
表示圖片填充的外部邊緣距離元素邊框為50px.如果邊框的寬度小於border-image-outset的值,那么元素與圖像填充之間會有(border-image-outset的值減去邊框寬度)大的間隙。
border-image-repeat:把圖片按照上面裁切的方式裁切之后,每部分的小圖片就要按照對應的邊框區域填充。在填充時,圖片的四個角的圖片不會改變。其余的圖片會隨着
border-image-repeat設定的填充方式來改變。