這篇文章主要介紹CSS3圖片邊框怎么實(shí)現(xiàn)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、湖口網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城系統(tǒng)網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為湖口等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

使用CSS3 border-image 屬性，你可以在元素的周圍設(shè)置圖片邊框。

一、瀏覽器支持

表中的數(shù)字指定完全支持該屬性的第一個(gè)瀏覽器版本。

數(shù)字后面的 -webkit- 或者 -moz- 使用時(shí)需要指定前綴。

二、CSS3 border-image 屬性

CSS3 border-image 屬性允許您指定要用來(lái)代替元素周圍的正常邊界的圖像。屬性有三個(gè)部分:

• 作為邊框的圖片。

• 在哪里分割圖像。

• 確定中間部分應(yīng)重復(fù)或延伸。

以下面的圖像(叫做 "border.png")為例：

原理分析：

border-image 性將圖像分割成九個(gè)部分，就像一個(gè)井字游戲板。然后將角放在拐角處，中間部分按指定的順序重復(fù)或拉伸。

注意:

讓border-image 正常工作, 元素也需要設(shè)置邊框?qū)傩?

1. 圖像的中間部分重復(fù)創(chuàng)建邊界，圖片作為邊框

CSS代碼：

  

  





  在這里，圖像的中間部分被延伸來(lái)創(chuàng)建邊界.


  
這里是原始圖像:

代碼如下：

#borderimg {

    border: 10px solid transparent;

    padding: 15px;

    -webkit-border-image: url(img/border.png) 30 round; /* Safari 3.1-5 */

    -o-border-image: url(img/border.png) 30 round; /* Opera 11-12.1 */

    border-image: url(img/border.png) 30 round;

}

2. 圖像的中間部分延伸到創(chuàng)建邊界：使用圖片作為邊框!

實(shí)例代碼：

#borderimg {

                border: 10px solid transparent;

                padding: 15px;

                -webkit-border-image: url(img/border.png) 30 stretch;

                /* Safari 3.1-5 */

                -o-border-image: url(img/border.png) 30 stretch;

                /* Opera 11-12.1 */

                border-image: url(img/border.png) 30 stretch;

            }

注意: border-image 屬性是border-image-source, border-image-slice, border-image-width, border-image-outset 和 border-image-repeat 的縮寫.

1. 不同的切片值

不同的切片值完全改變邊框的樣子：

實(shí)例 1

border-image: url(border.png) 50 round;

#borderimg1 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(img/border.png) 50 round;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 50 round;

/* Opera 11-12.1 */

border-image: url(img/border.png) 50 round;

}

實(shí)例 2

border-image: url(border.png) 20% round;

#borderimg2 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(img/border.png) 20% round;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 20% round;

/* Opera 11-12.1 */

border-image: url(img/border.png) 20% round;

}

實(shí)例 3

border-image: url(border.png) 30% round;

代碼如下：

#borderimg3 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(img/border.png) 30% round;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 30% round;

/* Opera 11-12.1 */

border-image: url(img/border.png) 30% round;

}

以上是“CSS3圖片邊框怎么實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！