在线运行代码 - 代码学院 www.codexy.cn

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>代码学院(codexy.cn)</title> 
<style> 
div {
    background-color: lightgrey;
    border: 30px solid transparent;
    border-image: url('border.png');
    border-image-slice: 30 30 30 30;
    border-image-width: 1 1 1 1;
    border-image-outset: 0;
    border-image-repeat: stretch;
}
</style>
</head>
<body>

<div id="main">
<p>
 DIV 使用图像边框。
</p>
</div>

<p>点击 “点我” 按钮来设置 borderImageRepeat 属性的值为 "round"。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.getElementById("main").style.borderImageRepeat = "round";
}
</script>

<p><b>注意: </b>Internet Explorer 10, Opera 12, 和 Safari 5 不支持 border-image-repeat 属性。</p>

</body>
</html>
源代码

动行结果
