深入淺析css3 border-image邊框圖像詳解

2024-07-11 08:29:37

字體：大中小

供稿：網(wǎng)友

我的作風(fēng)：首先給大家作自我介紹

hello，大家好，我叫小黑，也叫xiaoho，目前喜歡并從事寫頁(yè)面。因?yàn)椴幌矚g在那些類似BBS型的論壇上發(fā)帖，所以之前在 html-js 上發(fā)表幾篇戳文，現(xiàn)在申請(qǐng)了前端觀察打字員，在這里謝謝神飛童鞋，雖然我不懂他是干嘛的~不過(guò)為什么選擇在這里發(fā)表文章的緣由就是下面這句話：
向來(lái)中國(guó)的前端開(kāi)發(fā)領(lǐng)域，就像一盤散沙一樣，每個(gè)人每個(gè)站都各自為營(yíng)，高手就像就像天空的星星一樣多，但是他們的成就卻很少?gòu)V為傳播，初學(xué)者卻苦于在大海一樣的設(shè)計(jì)中尋找自己的參考。
我非圣人，我只是把我自己所學(xué)所想的表達(dá)出來(lái)，畢竟個(gè)人想法有限，假如有悖論或者冒犯之處，還請(qǐng)拍磚，大家一起在爭(zhēng)論中提高。還有，也許你們可能也會(huì)奇怪，為什么網(wǎng)上有這么一大把的學(xué)習(xí)的文章，類似的文章還要自己寫出來(lái)，我的個(gè)人想法是：只有自己親自去實(shí)踐過(guò)才有發(fā)言權(quán)。那么問(wèn)題來(lái)了：怎么對(duì)我的言語(yǔ)進(jìn)行反駁呢？在評(píng)論中猛戳！
前言
對(duì)于這個(gè)border-image屬性已經(jīng)不是什么新奇的事情了，也是一個(gè)老生長(zhǎng)談的話題。這是屬性從很多年前已經(jīng)出現(xiàn)了，但一直形單影只的，似乎不被看好，但是假如你對(duì)此深入研究之，想必其用處還是多多，不過(guò)很可惜到目前為止對(duì)于瀏覽器支持還不比其他css3屬性多，特別是IE，只有IE11以上才支持，詳情請(qǐng)移步 border-image兼容性。不過(guò)很好，對(duì)于純正的現(xiàn)代瀏覽器和移動(dòng)瀏覽器支持度還是非常牛逼哄哄的，所以今天就來(lái)詳解一下這個(gè)屬性的各個(gè)值。
border-image摘要
其實(shí)我[border-image屬性]是用來(lái)給元素邊框添加背景圖像，在某些時(shí)候，利用這個(gè) border-image 可以輕松繪制一些比較復(fù)雜的小部件。并且我是 border-image-source border-image-slice border-image-width border-image-outset border-image-repeat 的簡(jiǎn)寫值。只不過(guò)為了方便簡(jiǎn)寫，畢竟你懂得，我們家族 border-* 都是有簡(jiǎn)寫值，假如作為新生兒沒(méi)有，那看的人估計(jì)都醉了。
哦，對(duì)了，忘記跟你說(shuō)了，我的作用就是用來(lái)代替 border-style 值的。值得注意的是假如 border-image 值是none的話，那么背景圖像將不會(huì)顯示，同時(shí)，將會(huì)顯示 border-style 的值。那么我的詳細(xì)簡(jiǎn)寫值如下所示：