拼圖是一種常見的益智游戲，現在我們嘗試用CSS實現拼圖的效果。

<div class="puzzle"> 
<div class="tile" id="tile1">1</div>
<div class="tile" id="tile2">2</div>
<div class="tile" id="tile3">3</div>
<div class="tile" id="tile4">4</div>
<div class="tile" id="tile5">5</div>
<div class="tile" id="tile6">6</div>
<div class="tile" id="tile7">7</div>
<div class="tile" id="tile8">8</div>
<div class="tile" id="tile9">9</div>
</div>

我們首先需要將圖片切割成9個等份，然后將它們放入各個div中，使用CSS排列這些div，最終就能實現拼圖的效果了。

.puzzle {
display: flex;
flex-wrap: wrap;
width: 270px;
height: 270px;
background: url(puzzle_image.jpg);
border: 2px solid #ccc;
}
.tile {
width: 80px;
height: 80px;
background: #fff;
border: 1px solid #ccc;
font-size: 3rem;
font-weight: bold;
text-align: center;
line-height: 80px;
cursor: pointer;
}
#tile1 {
background-position: 0 0;
}
#tile2 {
background-position: -90px 0;
}
#tile3 {
background-position: -180px 0;
}
#tile4 {
background-position: 0 -90px;
}
#tile5 {
background-position: -90px -90px;
}
#tile6 {
background-position: -180px -90px;
}
#tile7 {
background-position: 0 -180px;
}
#tile8 {
background-position: -90px -180px;
}
#tile9 {
background-position: -180px -180px;
}

通過以上的代碼，我們使用了flex布局對九個div進行了排列，使用background-position屬性將切割后的圖片拼接到相應的div上，最終就能實現拼圖的效果了。