博客展示了使用HTML实现拼图效果的程序代码。通过设置不同的CSS样式，如宽度、高度、边框、背景图片等，将六张图片组合成拼图样式，分为上下两部分，且设置了圆角边框。
拼图效果
实例：
程序代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拼图效果</title>
<style>
.big{
width: 620px;
height: 470px;
border:#675E5E 2px solid;
margin: 50px auto;
border-radius: 50px;}
.up{
width: 610px;
height: 225px;
background-image:url("01.jpg"),url("02.jpg"),url("03.jpg");
background-repeat: no-repeat;
background-position: left ,center ,right ;
border-radius: 50px 50px 0 0 ;
padding: 5px;}
.down{
width: 610px;
height: 225px;
background-image:url("04.jpg"),url("05.jpg"),url("06.jpg");
background-repeat: no-repeat;
background-position: left,center,right;
border-radius: 0 0 50px 50px;
padding: 5px;}
</style>
</head>
<body>
<div class="big">
<div class="up"></div>
<div class="down"></div>
</div>
</body>
</html>
扫一扫
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
