x
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>蜜蜂教程(mifengjc.com)</title>6
<style>7
div {8
background-color: lightgrey;9
border: 30px solid transparent;10
border-image: url("/examples/border.png");11
border-image-slice: 30;12
border-image-width: 1 1 1 1;13
border-image-outset: 0;14
border-image-repeat: round;15
}16
</style>17
</head>18
<body>19
20
<div id="main">21
<p>22
这是一个使用图像作为边框的 DIV 元素。23
</p>24
</div>25
<p>下面是两个要使用的图像：</p>26
<img src="/examples/border.png">27
<img src="/examples/img_flwr.gif">28
<p>点击“尝试一下”按钮改变 borderImageSource 属性的值。</p>29
<button onclick="myFunction()">尝试一下</button>30
<script>31
function myFunction() {32
document.getElementById("main").style.borderImageSource = "url(" / examples / img_flwr.gif ")";33
}34
</script>35
<p><b>注意：</b>Internet Explorer 10、Opera 和 Safari 5 不支持 borderImageSource 属性。</p>36
37
</body>38
</html>