新聞中心
這篇文章主要為大家詳細介紹了css中border-image屬性的用法,圖文詳解容易學習,配合代碼閱讀理解效果更佳,非常適合初學者入門,感興趣的小伙伴們可以參考一下。
創(chuàng)新互聯(lián)建站公司2013年成立,先為武陵源等服務建站,武陵源等地企業(yè),進行企業(yè)商務咨詢服務。為武陵源企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
border-image屬性是一個簡寫屬性,設(shè)置所有 border-image-* 屬性。如果省略值,會設(shè)置其默認值。
語法:
border-image: source slice width outset repeat|initial|inherit;
屬性值:
● border-image-source:用于指定要用于繪制邊框的圖像的位置
● border-image-slice:圖像邊界向內(nèi)偏移
● border-image-width:圖像邊界的寬度
● border-image-outset:用于指定在邊框外部繪制 border-image-area 的量
● border-image-repeat:用于設(shè)置圖像邊界是否應重復(repeat)、拉伸(stretch)或鋪滿(round)。
注:
Internet Explorer 10 及更早的版本不支持 border-image 屬性。Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 屬性。Safari 5 支持替代的 -webkit-border-image 屬性。
說明:請使用 border-image-* 屬性來構(gòu)造漂亮的可伸縮按鈕!
css border-image屬性 示例
border-image 屬性用于指定一個元素的邊框圖像。
在這里,圖像平鋪(重復),以填補該地區(qū)。
在這里,圖像被拉伸以填補該地區(qū)
這是原始圖片:
![]()
注意: Internet Explorer 10 及更早的版本不支持 border-image 屬性。
效果圖:
看完上述內(nèi)容,你們對border-image屬性大概了解了嗎?如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
網(wǎng)頁名稱:cssborder-image屬性用法
網(wǎng)頁地址:http://www.ef60e0e.cn/article/gpipjo.html