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