CSS3 边界图片

2017-07-04 16:54:00
admin
原创
480
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
	border:15px solid transparent;
	width:250px;
	padding:10px 20px;
}

#round
{
	-webkit-border-image:url(http://code.ybao.org/demo/img/border.png) 30 30 round; /* Safari 5 and older */
	-o-border-image:url(http://code.ybao.org/demo/img/border.png) 30 30 round; /* Opera */
	border-image:url(http://code.ybao.org/demo/img/border.png) 30 30 round;
}

#stretch
{
	-webkit-border-image:url(http://code.ybao.org/demo/img/border.png) 30 30 stretch; /* Safari 5 and older */
	-o-border-image:url(http://code.ybao.org/demo/img/border.png) 30 30 stretch; /* Opera */
	border-image:url(http://code.ybao.org/demo/img/border.png) 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="http://code.ybao.org/demo/img//border.png" />

</body>
</html>		
				
  • QQ讨论群
  • 关注微信
    • 欢迎咨询
    • 欢迎加入QQ群 16506021
  • 公众号:源宝网络