CSS3 -- 圖片邊框（border-image）

一、border-image 描述、語法

　　在CSS3以前，border只能簡單的設置一些純色或幾種簡單的線型（如solid,dotted,double,dashed等）。

　　在CSS3中，border-image實現了給邊框設置不一樣的圖片效果。

border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

提示：border-image 實際應用中屬性是不能分解的

CSS3 border-image的參數：

一、none:是border-image的默認值，若是取值爲none時，表示邊框無背景圖片；

二、<image>：設置border-image的背景圖片，這個跟background-image同樣，使用絕對或相對的url地址，來指定背景圖片；

三、<number>：number是一個數值，用來設置邊框的寬度，其單位是px，其實就像border-width同樣取值，能夠使用1~4個值，其具體表示四個方位的值，你們能夠參考border-width的設置方式；

四、<percntage>：percntage也是用來設置邊框的寬度，跟number不一樣之處是，其使用的是百分比值來設置邊框寬度；

五、stretch,repeat,round:用來設置邊框背景圖片的鋪放方式，相似於background-position，其中stretch是拉伸（默認值），repeat是重複，round是平鋪。

參考： border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>

 

==>border-image-slice（用來分解引入進來的背景圖片）

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

 　　取值：支持:<number> | <percentage>；

　　 其中number是沒有單位的，專指像素px，由於其默認的單位就是像素px，因此在使用number時不須要加上單位，若是加上了單位反而是錯誤的寫法。

　　 percentage百分比值來表示，百分比的值是相對於邊框背景圖片而言的，例如邊框圖片的大小是300px*240px,咱們取百分比爲25% 30% 15% 20%，那麼它們實際對應的效果就是剪切了圖片的60px 90px 36px 60px的四邊大小。（以下圖）

　　 如上圖所示:border-image-slice中的number或者percentage都可取1~4個值，也是聽從top,right,bottom,left的規則。

　　 border-image-slice:fill；從字面上說是就是填充，若是使用這個關鍵字時，圖片邊界的中間部分將保留下來。默認狀況下是爲空的。

==>border-image-repeat（用來指定border-image的排列方式）

 　　這個屬性設置參數和其餘的不同，border-image-repeat不遵循top,right,bottom,left的方位原則，他只接受兩個（或一個）參數值，第一個表示水平方向，第二個表示垂直方向；當取值爲一個值時，表示水平和垂直方向的排列方式相同。同時其默認值是stretch，若是你省略不取值時，那麼水平和垂直方向都是以stretch排列。

 

二、border-image 兼容

　　更多兼容狀況：

三、border-image 用法

 /*Mozilla內核Firefox*/
  -moz-border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>
  /*Webkit內核Safari and Chrome*/
  -webkit-border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>
  /*Opera*/
  -oborder-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>
  /*W3C標準*/
  border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>

 

實例： 九宮格

　　（把取到的圖片進行四刀切後，切成了九份，再像background-image同樣從新佈置。按照它的1～4個參數，相似於border-width的方位規則，再把剪切到的圖片從新分佈給他們。）

　　展現效果區域：一、二、三、四、六、七、八、9

　　無展現效果區域：5 （盲區）

-webkit-border-image: url("../images/border.png") 27 round stretch;
-moz-border-image: url("../images/border.png") 27 round stretch;
-o-border-image: url("../images/border.png") 27 round stretch;
border-image: url("../images/border.png") 27 round stretch;

 

四、更多實例：CSS3 Border-image

 

整理自：（W3CPlus）CSS3 Border-image