第八十節，CSS3邊框圖片效果

標籤：http   影子   chrome   技術分享   指定   url   變化   股份   浮點   

CSS3邊框圖片效果

 

學習要點：
1.屬性初探
2.屬性解釋
3.簡寫和版本

本章主要探討HTML5中CSS3中邊框圖片背景的效果，通過這個新屬性讓邊框更加的豐富多彩。

 

一．屬性解釋

    CSS3提供了一個新的屬性集合，用這幾個屬性可以內嵌圖片形式的邊框。這樣，邊框就可以自訂了。

    1.border-image-source                      //引入背景圖片地址

    2.border-image-slice                          //切割引入背景圖片

    3.border-image-width                       //邊框圖片的寬度

    4.border-image-repeat                      //邊框背景圖片的相片順序

    5.border-image-outset                      //邊框背景向外擴張

    6.border-image                                 //上面五個屬性的簡寫方式

 

二．屬性解釋
要實現邊框背景，我們對圖片也有一定的要求，否則效果不能完全體現出來。圖片可以通過九宮格的切分來瞭解它。

 

                                        

 

如所示，九宮格並不一定要求每一個格子大小都相同。當然，如果相同的話，製作邊框背景就相對容易一點。首先，用Photoshop軟體分析一下這個標準九宮格的總體大小和每個格子的大小。最終得出圖片總大小為81p 正方形，四個角的大小為27p 的正方形，其餘五個角也是27p 。那麼，第一步：先建立一個盒子領域，大小為400x400的矩形。然後設定引入邊框映像。

 

border-image-source引入邊框映像

單單只有這句話，webkit引擎下的瀏覽器會在盒子區塊的四個角看到一丁點映像的影子。而其他瀏覽器什麼都看不到。這是由於沒有設定邊框背景映像的寬度導致的。

p{    width: 400px;    height: 300px;    border-image-source: url(border.png);}<p>是一部由北青傳媒股份</p>

 

border-image-width設定邊框映像寬度，上右下左，可以設定四個值

這裡設定的是邊框映像的寬度，而不是邊框寬度。當你設定邊框寬度，你會發現，文本會位移。而邊框映像的寬度不會擠壓文本。

p{    width: 400px;    height: 300px;    border-image-source: url(border.png);    border-image-width: 81px;}<p>是一部由北青傳媒股份</p>

 

border-width設定邊框的寬度

以上設定完畢後，支援邊框背景圖片的瀏覽器會在四個角落鋪上這張圖片的完整形式。這個時候需要通過引入切割屬性來配置背景圖片的顯示方式。

p{    width: 400px;    height: 300px;    border-image-source: url(border.png);    border-image-width: 81px;    border-width: 20px;}<p>是一部由北青傳媒股份</p>

 

border-image-slice設定切割屬性的大小

這裡的27不需要設定p 像素，因為它預設就是像素。設定27之後，我們會發現邊框的四個角正好是橘紅色的四個角。那麼你可以逐步放大或逐步放下這個值，來體驗一下它的變化。 

p{    width: 400px;    height: 300px;    border-image-source: url(border.png);    border-image-width: 27px;    border-width: 20px;    border-image-slice: 27;}<p>是一部由北青傳媒股份</p>

 

從27逐步放大到81，四個角都慢慢縮小，各自顯示一個完整的映像

    border-image-slice: 81;

 

從27逐步縮小到0，發現四個角都慢慢變大，配合fill整體顯示一個完整映像

    border-image-slice: 0 fill;

 

上面只是單獨設定了一個像素表示四個邊切割的大小，你也可以設定百分比、浮點值或者分別設定四個變的大小。

33.5%差不多27

    border-image-slice: 33.5%;

 

上下設定27，左右設定0

    border-image-slice: 27 0;

 

如果想讓邊框背景向外擴張，那麼可以進行擴張設定。向外擴張20p ，也可以是浮點值，比如2.2

    border-image-outset: 20px;

 

四個角設定好之後，我們要設定四個變的顯示相片順序。使用border-image-repeat 屬性，有四個值提供使用，分別如下表：

         屬性                                 說明

       stretch  　　　　　　　　指定用展開方式填充邊框背景圖。預設值。

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

       round　　　　　　　　   指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小，直至正好可以鋪滿整個邊框。

　　  space　　　　　　　　   指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的之間的間距，直至正好可以鋪滿整個邊框。

 

展開方式填充，當然，通過上右下左設定四個邊均可

    border-image-repeat: stretch;

 

平鋪填充，超過則被截斷

    border-image-repeat: repeat;

 

平鋪填充，動態調整圖片大小直至鋪滿

    border-image-repeat: round;

 

平鋪填充，動態調整圖片的間距直至鋪滿

    border-image-repeat: space;

 

另一個按鈕的小例子

    div {

        width: 400px;

        height: 40px;

        border-image-source: url(button.png);

        border-image-width: 10px;

        border-image-slice: 10fill;

        border-image-repeat: stretch;

    }

 

三．簡寫和版本

    border-image: url(border.png) 27/27p round;

    對於支援的瀏覽器及版本如下表：

                         　　　　Opera     　　　　 Firefo     　　　　Chrome    　　　　Safari      　　　　IE

     部分支援需帶首碼 　　  11.5~12.1          3.5 ~ 14             4 ~ 14                3.1~5.1                無

       支援需帶首碼              無                       無                       無                         無                        無

       支援不帶首碼             15+                    15+                    15+                      6+                   11.0+

 

相容加上首碼 

p{    width: 400px;    height: 300px;    -webkit-border-image: url(border.png) 27/27px round;    -moz-border-image: url(border.png) 27/27px round;    -o-border-image: url(border.png) 27/27px round;    border-image: url(border.png) 27/27px round;}<p>是一部由北青傳媒股份</p>

 

 

                  

        

                  

 

 

第八十節，CSS3邊框圖片效果