《border-image-generator》CSS3邊框圖線上產生器

梅問題-《border-image-generator》CSS3邊框圖線上產生器
  雖然說目前CSS3的語法還沒標準化,但CSS3裡所新增的新樣式,也為網頁增添了許多的便利與特色,讓以往用CSS2只能透過圖片的方式來呈現,現在只需用語法就可完成,甚至也突破了以往CSS2所沒有的功能,像是框邊圖,以前只能畫線框,但CSS3已支援邊框圖,讓邊框不再只是死板板的線框與圓角框,裡面已可加入圖片。
  而這說語法並不困難,但比較麻煩的是圖片的切割,因此在製作邊框圖時,要自行先把圖框給分割好,再透過CSS3的語法將它組合起來,實在有點小麻煩,但現在網路出現一個好工具,只要將邊框圖載入後,就可用控制把的方式,來分割出邊框圖的區域範圍,同時下方還會即時的顯示分割好的重覆畫面會長怎樣,當確定沒問題後,再把語法複製並貼到自己的網頁中,就大功告成囉!相當的方便好用喔!
CSS3邊框圖產生器:
網站名稱:border-image-generator
網站網址:http://border-image.com/

Step1
進入網站後,點上方的Browser的按鈕,載入已製作好的邊框圖。
梅問題-《border-image-generator》CSS3邊框圖線上產生器
Step2
接著從下方的控制把後,可將載入的邊框圖進行分割,同時右邊是分割的區塊示意圖,下方是分割後的結果畫面。
梅問題-《border-image-generator》CSS3邊框圖線上產生器
Step3
當一切都完成後,將下方邊框圖中的語法複製出來。
梅問題-《border-image-generator》CSS3邊框圖線上產生器
Step4
再貼到自已的網頁中,但圖片路徑要自行修改一下喔!
梅問題-《border-image-generator》CSS3邊框圖線上產生器
Step5
鏘~鏘~這不是底圖喔!而是邊框圖,是不是既方便又好用呀!
梅問題-《border-image-generator》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: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。