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>点击“尝试一下”按钮改变 borderImageSlice 属性的值。</p>26
<button onclick="myFunction()">尝试一下</button>27
<script>28
function myFunction() {29
document.getElementById("main").style.borderImageSlice = "50% 10%";30
}31
</script>32
<p><b>注意：</b>Internet Explorer 10、Opera 和 Safari 5 不支持 borderImageSlice 属性。</p>33
34
</body>35
</html>