在css中，可以利用border-image屬性來(lái)實(shí)現(xiàn)花邊邊框。border-image屬性可以使用圖片來(lái)創(chuàng)建邊框，即給邊框加上背景圖片，只需要將背景圖片指定為花邊樣式即可；語(yǔ)法“border-image: url(圖片路徑) 向內(nèi)偏移值 圖像邊界寬度 outset 是否重復(fù);”。

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css中，可以利用border-image屬性來(lái)實(shí)現(xiàn)花邊邊框。

css border-image屬性

border-image屬性可以使用圖片來(lái)創(chuàng)建邊框，即給邊框加上背景圖片。沒錯(cuò)，就是平常那一小小條的邊框，也能加圖片。

border-image是一個(gè)簡(jiǎn)寫屬性：

• border-image-source：用于指定要用于繪制邊框的圖像的位置

• border-image-slice：圖像邊界向內(nèi)偏移

• border-image-width：圖像邊界的寬度

• border-image-outset：用于指定在邊框外部繪制 border-image-area 的量

• border-image-repeat：用于設(shè)置圖像邊界是否應(yīng)重復(fù)（repeat）、拉伸（stretch）或鋪滿（round）。

省略的值設(shè)置為它們的默認(rèn)值。

1、border-image-source: url()

設(shè)置邊框圖片的路徑

2、border-image-slice: 100 100 100 100 fill

用以指定從哪 4 個(gè)位置分割圖像（遵循上右下左的順序）。

參數(shù)可以填 5個(gè)， 前1~4 個(gè)參數(shù) 是按照線的位置分割，按照 上 右 下 左的順序進(jìn)行分割， 值的設(shè)置跟其他值的縮寫方式一樣， 提供 2個(gè) 值 就是 上下 和 左右， 提供1個(gè)值 就設(shè)置4條線的位置。 注意 只能填數(shù)字， 百分比， 不能加上px。 100 就等于 100px

那么到底是怎么分割法的呢，看下面的圖片詳解，看起來(lái)可能有點(diǎn)亂， 認(rèn)真看，還是看得懂的呢。 藍(lán)色數(shù)字 9 ，是內(nèi)容區(qū)。 如果不填上第五個(gè)參數(shù) fill， 是會(huì)空白的。

3、border-image-width: 1

設(shè)置邊框圖片的寬度。 可以設(shè)置 數(shù)字， 和 px， 數(shù)字的話是幾倍的意思。 1的話， 就是 1 * border-width, 也可以設(shè)置auto。 auto的計(jì)算方式是，取 border-image-slice 的值，然后加上 px 如果border-image-slice 的值為 100， 那么取過(guò)來(lái)， 加上 px 就是 100px。

4、border-image-outset: 100px 100px 100px 100px

在原來(lái)的基礎(chǔ)上， 上 右 下 左 擴(kuò)大100px , 可以簡(jiǎn)寫。 也可以設(shè)置數(shù)字， 數(shù)字也一樣。是幾倍的意思。 1 代表 1倍 也就是 1* border-width(100) = 100px

5、border-image-repeat:

參數(shù)：stretch　　repeat　　round　　space

按照什么方式來(lái) 平鋪。 可以填 兩個(gè)參數(shù)， 一個(gè)參數(shù)， 代表 四個(gè)方向的平鋪一樣。 兩個(gè)參數(shù)，第一個(gè)值 代表 水平方向，第二個(gè)值代表 垂直方向。

網(wǎng)上截圖，截的不好， 所以有中間那個(gè)小紅點(diǎn)，忽略它就好。 這個(gè)方法，兼容情況不是很好，一般沒有特殊情況，不會(huì)去設(shè)置它的。

最后，簡(jiǎn)寫方式：

只能填，三個(gè)參數(shù)。 slice 和repeat 是可以填多個(gè)值的。

border-image: url(./img/Snipaste_2019-07-16_16-39-16.png) 100 space;                 /* 簡(jiǎn)寫： 三個(gè)參數(shù)  source  slice  repeat */

（學(xué)習(xí)視頻分享：css視頻教程、web前端）