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

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>