CSS3 边界图片

2017-07-04 16:54:00
admin
原创
303
<!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>		
				
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227