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