?
This document uses PHP Chinese website manual Release
border-image:<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>
默認值:看每個獨立屬性
適用于:看每個獨立屬性
繼承性:無
動畫性:看每個獨立屬性
計算值:看每個獨立屬性
<' border-image-source '>:
設(shè)置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑。
<' border-image-slice '>:
設(shè)置或檢索對象的邊框背景圖的分割方式。
<' border-image-width '>:
設(shè)置或檢索對象的邊框厚度。
<' border-image-outset '>:
設(shè)置或檢索對象的邊框背景圖的擴展。
<' border-image-repeat '>:
設(shè)置或檢索對象的邊框圖像的平鋪方式。
使用圖像替代 <' border-style '> 去定義邊框樣式。當 <' border-image '> 為none
或圖像不可見時,將會顯示 <' border-style '> 所定義的邊框樣式效果。
示例:
如果例子中的圖片不可見,或者未被加載,則會以 <' border '> 的定義呈現(xiàn),如果圖片載入成功,則以 <' border-image '> 的定義呈現(xiàn)。
對應(yīng)的腳本特性為borderImage。
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+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>border-image_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { border-width: 2px 9px; border-style: solid; border-color: orange; border-image: url(skin/button.png) 2 9 fill repeat; } </style> </head> <body> <div class="test">用圖片來做邊框</div> </body> </html>
點擊 "運行實例" 按鈕查看在線實例