案例：

图片资源:

 参考代码：

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	*{
		margin:0;
		padding:0;
	}
	.wai{
		width:608px;
		height:454px;
		border:5px solid #999;
		margin:50px auto;
		border-radius: 30px;
	}
	
	.one,.two{
		width:606x;
		height:227px;
		
	}
	.one{
		
		background-image: url("../../素材/01.jpg"),url("../../素材/02.jpg"),url("../../素材/03.jpg");
		background-repeat:no-repeat;
		background-position: left center,center center,right center;
		border-radius: 30px 30px 0px 0px;
	}
	.two{
		background-image: url("../../素材/04.jpg"),url("../../素材/05.jpg"),url("../../素材/06.jpg");
		background-repeat:no-repeat;
	background-position: left center,center center,right center;
		border-radius:  0px 0px 30px 30px;
	}
	
	
</style>
<body>
	<div class="wai">
	<div class="one">
		<spen class="d1"></spen>
		<spen class="d2"></spen>
		<spen class="d3"></spen>
		</div>	
	<div class="two">
		<spen class="d4"></spen>
		<spen class="d5"></spen>
		<spen class="d6"></spen>
		</div>
	</div>
</body>
</html>

更多推荐

HTML5网页设计基础——拼图效果