CSS3 邊框圖片(border-image)使用方法


備忘記:

 

1、CSS3 邊框圖片使用方法。

border-image:

  [border-image-source 圖片來源 ] 取值:none url(圖片路徑)

  [ border-image-slice分割方法 ]  取值:浮點數或百分比

  [ border-image-repeat重復方式 ]

 

border-image-slice
該屬性指定從上,右,下,左方位來分隔圖像,將圖像分成4個角,4條邊和中間區域共9份,中間區域始終是透明的(即沒圖像填充),除非加上關鍵字 fill。

border-image-width

說明:設置或檢索對象的邊框厚度。

該屬性用於指定使用多厚的邊框來承載被裁剪后的圖像。該屬性可省略,由外部的border-width來定義。對應的腳本特性為borderImageWidth。

取值:

<length>: 用長度值指定寬度。不允許負值。

<percentage>: 用百分比指定寬度。不允許負值。

<number>: 用浮點數指定寬度。不允許負值。

auto: 如果auto值被設置,則border-image-width采用與border-image-slice相同的值。

border-image-outset

說明:置或檢索對象的邊框背景圖的擴展。

該屬性用於指定邊框圖像向外擴展所定義的數值,即如果值為10px,則圖像在原本的基礎上往外延展10px再顯示。對應的腳本特性為borderImageOutset。

取值:

<length>: 用長度值指定寬度。不允許負值。

<number>: 用浮點數指定寬度。不允許負值。 

border-image-repeat

說明:設置或檢索對象的邊框圖像的平鋪方式。

該屬性用於指定邊框背景圖的填充方式。可定義0-2個參數值,即水平和垂直方向。如果2個值相同,可合並成1個,表示水平和垂直方向都用相同的方式填充邊框背景圖;如果2個值都為stretch,則可省略不寫。對應的腳本特性為borderImageOutset。

取值:

stretch: 指定用拉伸方式來填充邊框背景圖。

repeat: 指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時,如果超過則被截斷。

round: 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好可以鋪滿整個邊框。寫本文檔時僅Firefox能看到該效果

space: 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的之間的間距直至正好可以鋪滿整個邊框。寫本文檔時尚無瀏覽器能看到該效果 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM