DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> css3 border-image使用說明
css3 border-image使用說明
編輯:布局實例     

在看這個屬性時,好像國內的文章都沒給大家說太明白,今天就一起說說

首先來一個素材圖片whiteButton.png

 

然後我們要做成這樣的效果:

 

代碼(呵呵!請不要急,繼續向下看):

 

-moz-border-image: url(images/whiteButton.png) 0 12 0 12 round stretch; 
border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch; 
display: block; 
width:600px; 
border-width:0 12px; 
padding:10px; 
text-align: center; 
font-size: 16px; 
text-decoration: inherit; 

 

 

<div style="-webkit-border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;  -moz-border-image: url(images/whiteButton.png) 0 12 0 12 round stretch;  border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;  display: block;  width:600px;  border-width:0 12px;  padding:10px;  text-align: center;  font-size: 16px;  text-decoration: inherit;  color:white;+color:black;">在safari3+和FF3.5,chrome5.0+,opera10.53浏覽器裡能看到邊框背景圖</div>

下面我們來講一下基本知識:

 

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

 

 

none:
默認值。無背景圖。
<image>
使用絕對或相對 url 地址指定背景圖像。

 

 <number>

邊框寬度用固定像素值表示。
<percentage>:
邊框寬度用百分比表示。
[ stretch | repeat | round ]:

拉伸 | 重復 | 平鋪 (其中stretch是默認值。)

請看下圖平剖析一下css代碼

 

也就是:

他們把圖片,用#的方式截取,然後用 stretch | repeat | round 來控制水平或垂直的效果。看看下圖你就明白了

  

 

 當然關於邊框的寬度你也可以用%;其原理也是一樣:

 

到這  大家應該弄明白border-image是怎麼一回事了吧。

 

 參考文檔:www.lrbabe.com/sdoms/borderImage/

ejohn.org/blog/border-image-in-firefox/

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved