Css3中的border-image屬性怎么用

這篇文章主要介紹Css3中的border-image屬性怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

border-image是將簡單的工作復(fù)雜化，當(dāng)學(xué)習(xí)完該屬性以后，發(fā)現(xiàn)該屬性的運(yùn)用能夠大大節(jié)省編碼時(shí)間和效率，總結(jié)一下，大致適用于以下兩個(gè)場(chǎng)景：

元素邊框不規(guī)則的情況。這時(shí)候，就需要用設(shè)計(jì)圖作為邊框背景，border-image與background-image相比，好處是更具靈活性，可以用代碼控制邊框背景的拉伸和重復(fù)，因而能夠創(chuàng)造出更多樣的效果

按鈕寬高不確定的情況。用border-image來制作按鈕，可以用同一張背景圖，制造出各種寬高的按鈕。

border-image屬性分析

邊框背景圖片。格式為：url(“…”)。

border-image-slice

圖片邊框向內(nèi)偏移的距離。格式：border-image-slice：top right bottom left。分別指切割背景圖片的四條線距離上右下左的距離。

該距離接受數(shù)值，百分?jǐn)?shù)。默認(rèn)數(shù)值的單位是px,但是不能在數(shù)值后面加px，否則這句css將不被瀏覽器解析。 用法和margin，padding類似。這里以數(shù)值舉例，百分?jǐn)?shù)同理。

border-image-slice: 10; /*距離上下左右均為10px;*/

border-image-slice: 10 30; /*距離上下10px,左右30px;*/

border-image-slice: 10 30 20; /*距離上10px,下20px,左右30px;*/

border-image-slice: 10 30 20 40; /*距離上10px,右30px,下20px,左40px;*/

四條線將背景圖分割成了9個(gè)部分，其中1,2,3,4,6,7,8,9這八個(gè)區(qū)域?qū)?huì)被切割，作為圖片邊框，如果除了設(shè)置數(shù)值或者百分?jǐn)?shù)，還加了一個(gè)“fill”，那么區(qū)域5就會(huì)作為背景填充進(jìn)元素content，如：

border-image-slice: 25 11 fill;

注意：slice不接受負(fù)值；如果slice切割的左右距離之和大于背景圖的寬，則上下邊框不顯示。如果slice切割的上下距離之和大于背景圖的高，則左右邊框不顯示。

border-image-width

圖片邊框的寬度。只接受數(shù)值，且不能加單位。

以上是“Css3中的border-image屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！