css3如何實(shí)現(xiàn)花邊邊框

這篇文章主要介紹“css3如何實(shí)現(xiàn)花邊邊框”，在日常操作中，相信很多人在css3如何實(shí)現(xiàn)花邊邊框問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css3如何實(shí)現(xiàn)花邊邊框”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

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

本教程操作環(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 */

到此，關(guān)于“css3如何實(shí)現(xiàn)花邊邊框”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！