語法:
border-image : none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}
相關屬性 : border-image:border-top-image , border-right-image , border-bottom-image , border-left-image
border-corner-image:border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image
取值:
- none:
- 默認值。無背景圖。
- <image>:
- 使用絕對或相對 url 地址指定背景圖像。
- <number>:
- 邊框?qū)挾扔霉潭ㄏ袼刂当硎尽?
- <percentage>:
- 邊框?qū)挾扔冒俜直缺硎尽?/dd>
- [ stretch | repeat | round ]:
- 拉伸 | 重復 | 平鋪 (其中stretch是默認值。)
- ?
說明:
- 使用圖片作為對象的邊界。
當table設置border-collapse為collapse無效。
引擎類型 | Gecko | Webkit | Presto |
---|---|---|---|
Border-image | -moz-border-image | -webkit-border-image | ? |
? |
兼容性:
類型 |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
版本 | (×)IE6 | (×)Firefox 2.0 | (√)Chrome 1.0.x | (×)Opera 9.64 | (√)Safari 3.1 |
(×)IE7 | (×)Firefox 3.0 | (√)Chrome 2.0.x | (√)Safari 4 | ||
(×)IE8 | (√)Firefox 3.5 | ||||
示例:

使用的圖片: