CSS3的border-image和border-image產生器

CSS3可以設定border的邊框圖片,稍微設定一下就可以使用了,也是很方便,一樣要注意瀏覽器是否支援的問題。

首先準備一張要當邊框的圖片。
css3 border

然後作以下設定:
  1. div   
  2. {   
  3. border-image:url(border.png) 30 30 round;   
  4. -moz-border-image:url(border.png) 30 30 round; /* Firefox */  
  5. -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */  
  6. -o-border-image:url(border.png) 30 30 round; /* Opera */  
  7. }   

385049_2876369198128_1281990434_n

數字代表邊框粗細,可以照上、右、下、左的方向設定粗細,然後可以在作以下的設定圖片重複的方式。
repeat: 圖片重複排列。
round: 圖片重複,並把圖片頭尾相接。
stretch: 圖片延展。

然後網路上有一個border-image-generator,可以測試看看,也可以幫助更輕鬆寫CSS的border-image。

留言

熱門文章