案例:CSS3 案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style> 
5
div
6
{
7
border:10px solid transparent;
8
width:40px;
9
padding:5px 10px;
10
-moz-border-image: url(/img/border_image_button.png) 0 14 0 14 stretch; /* 老版本的 Firefox */
11
-webkit-border-image: url(/img/border_image_button.png) 0 14 0 14 stretch; /* Safari */
12
-o-border-image: url(/img/border_image_button.png) 0 14 0 14 stretch; /* Opera */
13
border-image: url(/img/border_image_button.png) 0 14 0 14 stretch;
14
}
15
</style>
16
</head>
17
<body>
18
19
<p><b>注释:</b>Internet Explorer 不支持 border-image 属性。</p>
20
21
<div>Search</div>
22
23
<p>这是我们使用的图片:</p>
24
<img src="/img/border_image_button.png">
25
26
</body>
27
</html>
28