CSS 邊框圖片(Border Image)

原圖片每邊各只有一隻豬,當段落越長時邊框自動補滿豬.

這是用border 語法的線條框.

關於元素邊線,還記得嗎?你可以利用CSS 的 border屬性來顯示出元素邊框線, 而css3 版本更進階用border-image屬性圖片來當元素邊框

邊框圖的製作格式:

1.如上圖,為了方便說明,我把它標出分割線使圖檔分成9格區域,實際製作時不必畫出格線喔

2.在觀念上你要了解,css3在制訂邊框照片寬度是以「圖片重複顯示」來降低檔案大小,所以圖中的"豬"你只需畫一隻就可,或許你會問那我-內容寬度很長需畫很多隻豬媽?不用喔!每邊只需畫1隻就好(你可以畫珠不要畫豬啦),外加以重複(repeat)或延長(stretched)參數,就可自動補滿邊框喔

3.記下你繪製時,制定給圖片中間格子的佔有寬度,這寬度值是寫在css中需要的參數(我範例中訂同等寬24px)

4.正中央區塊是背景區塊,若非空白會自動填滿該元素的背景

圖片原圖:

疑~這小小圖片又是正方形能當長方形邊框?夠長嗎?初學者一定跟我有同樣疑問吧?!

  1. 邊框圖片(Border)語法:border-image: url(./img/border_img.jpg圖檔) 指定(上 下 左 右)圖寬 指定水平重複方式 指定垂直重複方式;
  2. 例:邊框圖片(Border)語法四邊各別指定:border-image: url(./img/border_img.jpg圖檔) 24 24 24 24 round stretch; (說明:水平重複/垂直延伸)
  3. 例:邊框圖片(Border)語法四邊同屬性時簡寫:border-image: url(./img/border_img.jpg圖檔) 24 round;
border-image: url(./img/border_img.jpg) 24 round;
重複方式參數 說明
repeat 圖像(豬)會重複顯示來填滿該區邊,末端容許未滿整片的圖像
round 圖像(豬)會重複顯示來填滿該區邊,但空間若不是圖像(豬)倍數則會自動縮放
space 圖像(豬)會重複顯示來填滿該區邊,邊長若非圖像(豬)寬度的整數無法整隻填滿時剩餘空間就空白
stretch 延伸,圖像豬只在該單邊線出現一隻,但會被拉長填滿邊框長度

套入圖片邊框實例:

原圖片每邊各只有一隻豬,當段落越長時邊框自動補滿豬.

範例: