html5+css/运用css的多图片背景进行一个网页拼图效果/案例演示

一、分析效果

二、开始实现

1.打开Dreamweaver2021新建立一个html5格式文件，并修改title为"拼图效果"然后搭建起结构

2.使用嵌入的方法引入css样式。

<style>
	*{
		padding: 0;
		margin: 0;
		/*首先清除浏览器默认的边距的效果*/
	}
	.box{
		width: 604px;
		height: 454px;
		border: 5px #CCC solid;
		border-radius: 50px;
		margin: 50px auto;
		/*设置居中显示（左右自适应上下50px*/
	}
	.one{
		width: 604px;
		height: 227px;
		background-image:url("01.jpg"),url("02.jpg"),url("03.jpg");
		background-repeat: no-repeat;
		background-position: left,center,right;
		border-radius: 45px 45px 0 0;
	}
	.two{
		width: 604px;
		height: 227px;
		background-image:url("04.jpg"),url("05.jpg"),url("06.jpg");
		background-repeat: no-repeat;
		background-position: left,center,right;
		border-radius: 0px 0px 45px 45px;
	}
</style>

3.使用浏览器预览效果