x
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>蜜蜂教程(mifengjc.com)</title>6
<style>7
#myDIV {8
border: 15px solid transparent;9
width: 250px;10
padding: 10px 20px;11
border-image: url(border.png) 30 30 stretch;12
/* Safari 5 */13
border-image: url(border.png) 30 30 stretch;14
/* Opera 12 */15
border-image: url(border.png) 30 30 stretch;16
}17
</style>18
</head>19
<body>20
21
<p>点击“尝试一下”按钮改变 DIV 元素的 border-image 属性：</p>22
<button onclick="myFunction()">尝试一下</button>23
<div id="myDIV">24
<h1>您好</h1>25
</div>26
<script>27
function myFunction() {28
document.getElementById("myDIV").style.borderImage = "url(border.png) 30 30 round";29
document.getElementById("myDIV").style.WebkitBorderImage = "url(border.png) 30 30 round"; /* 针对 Safari 5 的代码 */30
document.getElementById("myDIV").style.OBorderImage = "url(border.png) 30 30 round"; /* 针对 Opera 12 的代码 */31
}32
</script>33
34
</body>35
</html>