代码示例：（标识：css_border-image）
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf8" />
<link rel="stylesheet" type="text/css" href="/static/demo/html/css/cc.css" />
<script type="text/javascript" src="/static/demo/html/css/cs.js"></script>
<script type="text/javascript">
<!--
function test_demo_val(strValue)
{
var strId="MyDIV"
document.getElementById(strId).style.borderImage=strValue;
document.getElementById(strId).style.WebkitBorderImage=strValue;
document.getElementById(strId).style.MozBorderImage=strValue;
document.getElementById(strId).style.OBorderImage=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
//-->
</script>
<style>
#MyDIV
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
border-image:url(/static/demo/images/border.png) 30 30 stretch;
-webkit-border-image:url(/static/demo/images/border.png) 30 30 stretch;
-moz-border-image:url(/static/demo/images/border.png) 30 30 stretch;
-o-border-image:url(/static/demo/images/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<!--wrapper-->
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>border-image:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="url(/static/demo/images/border.png) 30 30 stretch" checked="checked" />url(/static/demo/images/border.png) 30 30 stretch</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="url(/static/demo/images/border.png) 30 30 round" />url(/static/demo/images/border.png) 30 30 round</li>
</ul>
</form>
<div id="SelAreaCode">
<p>这是我们使用的图片：</p>
<img src="/static/demo/images/border.png" />
</div>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
<div id="MyDIV">
<b>注释：</b>Internet Explorer 不支持 border-image 属性。
</div>
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
#MyDIV
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
border-image:<span id="CodeValue">url(/static/demo/images/border.png) 30 30 stretch</span>;
}
</pre>
</div>
</div><!--wrapper End-->
</body>
<script type="text/javascript">tiy_onload()</script>
</html>
