语法：

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>：
边框宽度用固定像素值表示。
<percentage>：
边框宽度用百分比表示。
[ stretch | repeat | round ]：
拉伸 | 重复 | 平铺 (其中stretch是默认值。)
 

说明：

  1. 使用图片作为对象的边界。

当table设置border-collapse为collapse无效。

引擎类型 Gecko Webkit Presto
Border-image -moz-border-image -webkit-border-image  
 

兼容性：

类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)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

示例：

使用的图片: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="robots" content="all" />
<meta name="author" content="Tencent-ISRD" />
<meta name="Copyright" content="Tencent" />
<title>Border-image</title>
</head>
<body>
<div style="-webkit-border-image: url(img/bt_blue.png) 0 12 0 12 stretch stretch;-moz-border-image: url(img/bt_blue.png) 0 12 0 12 stretch stretch;
    display: block;
    border-width: 0 12px;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    text-decoration: inherit;
    color:white;+color:black;">在safari3+和FF3.5浏览器里能看到边框背景图</div>
</body>
</html>

快速跳转