在线运行代码 - 菜鸟教程

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(cainiaoplay.com)</title>
<style>div
{
	border:15px solid transparent;
	width:250px;
	padding:10px 20px;
}

#round
{
	-webkit-border-image:url(border.png.html) 30 30 round; /* Safari 5 and older */
	-o-border-image:url(border.png.html) 30 30 round; /* Opera */
	border-image:url(border.png.html) 30 30 round;
}

#stretch
{
	-webkit-border-image:url(border.png.html) 30 30 stretch; /* Safari 5 and older */
	-o-border-image:url(border.png.html) 30 30 stretch; /* Opera */
	border-image:url(border.png.html) 30 30 stretch;
}
</style>
</head>
<body>

<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>

<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>

<p>这是我们使用的图片素材：</p>
<img src="https://www.cainiaoplay.com/images/border.png" />

</body>
</html>
源代码

动行结果
