CSS教學-CSS3 邊框圖片border-image

梅問題-CSS3-CSS3邊框圖片
  CSS3真是一個好物,先前也分享過,CSS3所代來的便利,接下來再分享一個,也是製作網頁常會用到的,那就是邊框圖片,在CSS2的時代中,若想要在DIV的邊框加圖片,就要用好幾層標籤來包,再才作到擴張延展,但到了CSS3後,只要作好一張邊框的範本檔,就可設定是要延展、擴張還是重覆,真是超方便的,但目前支援CSS3邊框圖片的瀏覽器有Google Chrome、Firefox、Safari....等,IE9.0依然還是不支援,看來要等到IE10了。
  雖然IE9.0不支援,但其它三個瀏覽器的使用率,也接近七、八成,因此CSS3也的時代,也漸漸的來臨了,所以各位也可開始陸續使用,而梅干也把語法整理了一下,其實用法與之前差不多,唯一較大的不同則在於,圖片分割的部分,現在就一塊來看看,如何把邊框加入圖片吧!讓版面更靈活。
邊框圖片border-image支援瀏覽器:
Google Chrome、Firefox、Safari

邊框圖片border-image語法:
border-image-source:邊框圖片來源
border-image-slice:邊框圖片分割,border-image-slice 會把圖片分成九公格,抓出圖片四角的圖片位置,分別為上、右、下、左,數字後面不可加單位。
梅問題-CSS3-CSS3邊框圖片

border-image-width:邊框圖片寬度。
border-image-repeat:邊框圖片中間重覆設定,共有三個參數可作控制。
  stretch:延展方式填滿。
  repeat:重複方式填滿。
  round:重複方式填滿。當無法以整數的倍數填滿時,就會依照整數倍數來縮放圖片並填滿。
  space:重複填滿。用整數倍數填滿,其它不足的部分,再縮放圖片填滿。
梅問題-CSS3-CSS3邊框圖片

邊框圖片border-image實作:
/* Safari and Chrome */
-webkit-border-image-source: url(bdic.png);
-webkit-border-image-slice: 20;
-webkit-border-image-width: 1em;
-webkit-border-image-repeat: stretch;

/* Firefox */
-moz-border-image-source: url(bdic.png);
-moz-border-image-slice: 20;
-moz-border-image-width: 1em;
-moz-border-image-repeat: stretch;

/* CSS3 */
border-image-source: url(bdic.png);
border-image-slice: 20;
border-image-width: 1em;
border-image-repeat: stretch;

邊框圖片border-image結果預覽:
#Google Chrome:
梅問題-CSS3-CSS3邊框圖片
#Firefox:
梅問題-CSS3-CSS3邊框圖片
#Safari:
梅問題-CSS3-CSS3邊框圖片

[範例預覽] [範例下載]

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。