实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-imgage属性</title>
<style>
.p-border1{
border:13px solid transparent;
width:500px;
padding:10px;
border-image:url(img/border-3.png) 50 round;
}
.p-border2{
border:13px solid transparent;
width:500px;
padding:10px;
border-image:url(img/border-3.png) 20% round;
}
.p-border3{
border:13px solid transparent;
width:500px;
padding:10px;
border-image:url(img/border-3.png) 30% round;
}
</style>
</head>
<body>
<h1>border-image 属性</h1>
<p>此处，图像的中间部分被拉伸以创建边框：</p>
<p class="p-border1">border-image:url(img/border.png) 30 round;</p>
<p class="p-border2">border-image:url(img/border.png) 30 round;</p>
<p class="p-border3">border-image:url(img/border.png) 30 round;</p>
<p>这是原始图像</p>
<img src="img/border-3.png" ></img>
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持border-image属性</p>
</body>
</html>运行效果：
评论