日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),金昌企業(yè)網(wǎng)站建設(shè),金昌品牌網(wǎng)站建設(shè),網(wǎng)站定制,金昌網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,金昌網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

border-image 屬性可以通過一些簡單的規(guī)則，將一副圖像劃分為 9 個單獨的部分，瀏覽器會自動使用相應(yīng)的部分來替換邊框的默認樣式。border-image 屬性是五個 border-image-* 屬性的簡寫，其語法格式如下：

border-image：border-image-source || border-image-slice [ / border-image-width | / border-image-width ? / border-image-outset ]? || border-image-repeat

通過語法可以看出 border-image 是 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 屬性的簡寫，其中：

• border-image-source：定義邊框圖像的路徑；
• border-image-slice：定義邊框圖像從什么位置開始分割；
• border-image-width：定義邊框圖像的厚度（寬度）；
• border-image-outset：定義邊框圖像的外延尺寸（邊框圖像區(qū)域超出邊框的量）；
• border-image-repeat：定義邊框圖像的平鋪方式。

接下來我們通過如下所示的圖片來演示一下 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 幾個屬性的使用。

1. border-image-source

border-image-source 屬性用來定義邊框要使用的圖像，通過該屬性可以指定一個圖像來替換邊框的默認樣式，當(dāng) border-image-source 屬性的值為 none 或者指定的圖像不可用時，則會顯示邊框默認的樣式。

另外，border-image-source 屬性除了可以使用圖像來替換邊框的默認樣式外，您還可以使用漸變來定義邊框樣式，屬性的語法格式如下：

border-image-source：none |

其中，none 為 border-image-source 屬性的默認值，表示不使用圖像來替換邊框的默認樣式； 為使用 url() 函數(shù)指定的圖像路徑或者使用 linear-gradient() 函數(shù)定義的漸變色，用來替換默認的邊框樣式。

【示例】通過 border-image-source 屬性使用圖像來替換默認的邊框樣式：

    


    
使用圖片替換默認邊框

運行結(jié)果如下圖所示：

通過運行結(jié)果可以看出，僅僅借助 border-image-source 屬性并不能達到我們想要的效果，我們再來看一下其它幾個函數(shù)。

2. border-image-slice

border-image-slice 屬性用來分割通過 border-image-source 屬性加載的圖像，屬性的語法格式如下：

border-image-slice：[ | ]{1,4} && fill?

border-image-slice 屬性可以接收三種類型的值：

• ：數(shù)值，用具體數(shù)值指定圖像分割的位置，數(shù)值代表圖像的像素位置或向量坐標(biāo)，不允許負值；
• ：百分比，相對于圖像尺寸的百分比，圖像的寬度影響水平方向，高度影響垂直方向；
• fill：保留邊框圖像的中間部分。

border-image-slice 屬性可以指定上、下、左、右四個方位來分割圖像，并將圖像分成 4 個角、4條邊和中間區(qū)域等 9 個部份，中間區(qū)域始終是透明的（即沒圖像填充），除非加上關(guān)鍵字 fill，如下圖所示：

除 fill 關(guān)鍵字外，border-image-slice 屬性可以接受 1~4 個參數(shù)值：

• 如果提供全部四個參數(shù)值，那么將按上、右、下、左的順序?qū)D像進行分割；
• 如果提供三個參數(shù)，那么第一個參數(shù)用于上方，第二個參數(shù)用于左、右兩側(cè)，第三個參數(shù)用于下方；
• 如果提供兩個參數(shù)，那么第一個參數(shù)用于上方和下方，第二個參數(shù)用于左、右兩個；
• 如果只提供一個參數(shù)，那么上、右、下、左都將使用該值進行分割。

【示例】使用 border-image-slice 屬性用來分割通過 border-image-source 屬性加載的圖像：

    


    
使用圖片替換默認邊框

運行結(jié)果如下圖所示：

3. border-image-width

border-image-width 屬性用來設(shè)置通過 border-image-source 屬性加載的圖像厚度（寬度），屬性的語法格式如下：

border-image-width：[ | | | auto ]{1,4}

語法說明如下：

• ：使用數(shù)值加單位的形式指定圖像邊框的寬度，不允許為負值；
• ：用百分比的形式指定圖像邊框的寬度，參照圖像邊框區(qū)域的寬和高進行換算，不允許負值；
• ：使用浮點數(shù)指定圖像邊框的寬度，該值對應(yīng) border-width 的倍數(shù)，例如值為 2，則參數(shù)的實際值為 2 * border-width，不允許負值；
• auto：由瀏覽器自動設(shè)定，當(dāng) border-image-width 設(shè)置為 auto 時，它的實際值與 border-image-slice 相同的值。

提示：border-image-width 屬性的默認值為 1，也就是說當(dāng)我們省略 border-image-width 屬性的值時，該屬性的值會被設(shè)置為 1 * border-width，相當(dāng)于會直接使用 border-width 的值。

border-image-width 屬性同樣可以接受 1~4 個參數(shù)值：

• 如果提供全部四個參數(shù)值，那么將按照上、右、下、左的順序設(shè)置圖像邊框四個方向上的寬度；
• 如果提供三個參數(shù)，那么第一個參數(shù)用于上邊框，第二個參數(shù)用于左、右兩個邊框，第三個參數(shù)用于下邊框；
• 如果提供兩個參數(shù)，那么第一個參數(shù)用于上、下兩個邊框，第二個參數(shù)用于左、右兩個邊框；
• 如果只提供一個參數(shù)，那么上、右、下、左都將使用該值設(shè)置圖像邊框的寬度。

【示例】使用 border-image-width 屬性設(shè)置圖像邊框的寬度：

    


    
使用圖片替換默認邊框

運行結(jié)果如下圖所示：

4. border-image-outset

border-image-outset 屬性用來定義圖像邊框相對于邊框邊界向外偏移的距離（使圖像邊框延伸到盒子模型以外），該屬性的語法格式如下：

border-image-outset：[ | ]{1,4}

語法說明如下：

• ：用具體的數(shù)值加單位的形式指定圖像邊框向外偏移的距離，不允許為負值；
• ：用浮點數(shù)指定圖像邊框向外偏移的距離，該值表示 border-width 的倍數(shù)，例如值為 2，則表示偏移量為 2 * border-width，不允許為負值。

border-image-outset 屬性同樣可以接受 1~4 個參數(shù)值：

• 如果提供全部四個參數(shù)值，那么將按上、右、下、左的順序作用于四邊；
• 如果提供三個參數(shù)值，那么第一個參數(shù)將用于上邊框，第二個參數(shù)將用于左、右兩個邊框，第三個參數(shù)將用于下邊框；
• 如果提供兩個參數(shù)，那么第一個參數(shù)將用于上、下兩個邊框，第二個參數(shù)將用于左、右兩個邊框；
• 如果只提供一個參數(shù)，那么該參數(shù)將同時作用于四邊。

【示例】使用 border-image-outset 屬性設(shè)置圖像邊框相對于邊框邊界向外的偏移量：

    


    
使用圖片替換默認邊框

運行結(jié)果如下圖所示：

5. border-image-repeat

border-image-repeat 屬性用來設(shè)置如何填充使用 border-image-slice 屬性分割的圖像邊框，例如平鋪、拉伸等等，該屬性的語法格式如下：

border-image-repeat：[ stretch | repeat | round | space ]{1,2}

語法說明如下：

• stretch：將被分割的圖像使用拉伸的方式來填充滿邊框區(qū)域；
• repeat：將被分割的圖像使用重復(fù)平鋪的方式來填充滿邊框區(qū)域，當(dāng)圖像碰到邊界時，超出的部分會被截斷；
• round：與 repeat 關(guān)鍵字類似，不同之處在于，當(dāng)背景圖像不能以整數(shù)次平鋪時，會根據(jù)情況縮放圖像；
• space：與 repeat 關(guān)鍵字類似，不同之處在于，當(dāng)背景圖像不能以整數(shù)次平鋪時，會用空白間隙填充在圖像周圍。

border-image-repeat 屬性能夠接受 1~2 個參數(shù)值：

• 如果提供兩個參數(shù)，那么第一個參數(shù)將用于水平方向，第二個將用于垂直方向；
• 如果只提供一個參數(shù)，那么將在水平和垂直方向都應(yīng)用該值。

【示例】使用 border-image-repeat 屬性設(shè)置圖像邊框的填充方式：

    


    
使用圖片替換默認邊框

運行結(jié)果如下圖所示：

6. border-image

了解完 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 這幾個屬性，我們回頭再來看看 border-image 屬性。border-image 屬性是五個 border-image-* 屬性的簡寫，通過 border-image 屬性可以同時設(shè)置五個 border-image-* 屬性。

【示例】使用 border-image 屬性設(shè)置圖片邊框：

    


    
使用圖片替換默認邊框

運行結(jié)果如下圖所示：