?
This document uses PHP Chinese website manual Release
border-image-repeat:[ stretch | repeat | round | space ]{1,2}
默認(rèn)值:stretch
適用于:所有元素,除table元素設(shè)置了 <' border-collapse '> 為collapse之外
繼承性:無(wú)
動(dòng)畫(huà)性:否
計(jì)算值:指定值
stretch:
指定用拉伸方式來(lái)填充邊框背景圖。
repeat:
指定用平鋪方式來(lái)填充邊框背景圖。當(dāng)圖片碰到邊界時(shí),如果超過(guò)則被截?cái)唷?/p>
round:
指定用平鋪方式來(lái)填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的大小直至正好可以鋪滿(mǎn)整個(gè)邊框。
space:
指定用平鋪方式來(lái)填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的之間的間距直至正好可以鋪滿(mǎn)整個(gè)邊框。
該屬性用于指定邊框背景圖的填充方式??啥x0-2個(gè)參數(shù)值,即水平和垂直方向。如果2個(gè)值相同,可合并成1個(gè),表示水平和垂直方向都用相同的方式填充邊框背景圖;如果2個(gè)值都為stretch,則可省略不寫(xiě)。
對(duì)應(yīng)的腳本特性為borderImageRepeat。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-10.0 | 2.0-3.0 | 4.0-14.0 -webkit- | 3.1-5.1 -webkit- | 15.0+ | 3.2-5.1 -webkit- | 2.1-4.3 -webkit- | 18.0+ |
11.0+ | 3.5-14.0 -moz- | 15.0 -webkit- | 6.0+ | 6.1+ | 4.4-4.4.4 | |||
15.0+ | 16.0+ | |||||||
space | 11.0 #1 | 3.5-38.0 #1 | 15.0-43.0 #1 | 3.1-8.1 #1 | 15.0-28.0 #1 | 3.2-8.1 #1 | 2.1-4.4.4 #1 | 18.0-40.0 #1 |
不支持 space 屬性值。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>border-image-repeat_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test{ padding: 10px; border-image-source: url(skin/border.png); border-image-slice: 27; border-image-width: auto; border-image-repeat: repeat; } </style> </head> <body> <div class="test">用圖片來(lái)做邊框</div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例