這篇文章給大家分享的是有關css中border-image-width屬性如何使用的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,臨澧企業(yè)網(wǎng)站建設,臨澧品牌網(wǎng)站建設,網(wǎng)站定制,臨澧網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,臨澧網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
css border-image-width屬性用于指定圖像邊界的寬度,可以設置4個值(不可為負值),把邊框圖像分割為九個部分。它們代表了從區(qū)域的上、右、下、左側(cè)向內(nèi)的距離。
css border-image-width屬性怎么用?
border-image-width屬性規(guī)定圖像邊框的寬度。
語法:
border-image-width: number|%|auto;
屬性值:
number:表示相應的border-width 的倍數(shù)
%:邊界圖像區(qū)域的大小:橫向偏移的寬度的面積,垂直偏移的高度的面積
auto:如果指定了,寬度是相應的image-slice的內(nèi)在寬度或高度。
注釋:
border-image-width 屬性的的4個值指定用于把邊框圖像分割為九個部分。它們代表了從區(qū)域的上、右、下、左側(cè)向內(nèi)的距離。
如果忽略第四個值,則與第二個值相同。如果省略第三個值,則與第一個值相同。如果省略第二個值,則與第一個值相同。不允許任何負值作為 border-image-width 值。
css border-image-width屬性 示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div { border: 30px solid transparent; border-image: url('/upload/otherpic49/5c62637b1a4fe853.png'); border-image-width: auto; border-image-repeat: round; border-image-slice: 30; } </style> </head> <body> <div>DIV 使用圖像邊框</div> <p>使用的圖片:</p> <img src="/upload/otherpic49/5c62637b1a4fe853.png"> </body> </html>
效果圖:
感謝各位的閱讀!關于css中border-image-width屬性如何使用就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
分享題目:css中border-image-width屬性如何使用
網(wǎng)站鏈接:http://www.chinadenli.net/article12/gojidc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、網(wǎng)頁設計公司、Google、微信公眾號、建站公司、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)