CSS樣式可以幫助我們在網頁中制作出各種各樣的效果和形式，今天我們介紹一款非常簡單易用的CSS拼圖素材。

.puzzle {
position: relative;
}
.puzzle .piece {
position: absolute;
background-size: calc(4 * var(--size)) calc(2 * var(--size));
width: calc(2 * var(--size));
height: calc(2 * var(--size));
transition: all 0.2s;
}
.puzzle .piece:nth-of-type(1) {
background-position: 0 0;
}
.puzzle .piece:nth-of-type(2) {
background-position: calc(2 * var(--size)) 0;
}
.puzzle .piece:nth-of-type(3) {
background-position: calc(4 * var(--size)) 0;
}
.puzzle .piece:nth-of-type(4) {
background-position: 0 calc(2 * var(--size));
}
.puzzle .piece:nth-of-type(5) {
background-position: calc(2 * var(--size)) calc(2 * var(--size));
}
.puzzle .piece:nth-of-type(6) {
background-position: calc(4 * var(--size)) calc(2 * var(--size));
}
.puzzle .piece:nth-of-type(7) {
background-position: 0 calc(4 * var(--size));
}
.puzzle .piece:nth-of-type(8) {
background-position: calc(2 * var(--size)) calc(4 * var(--size));
}
.puzzle .piece:nth-of-type(9) {
background-position: calc(4 * var(--size)) calc(4 * var(--size));
}

這是一個9塊的拼圖，在HTML中只需要用一個div包裹起來，再分別用9個div表示每一塊，用css定好每一塊的位置和背景圖片位置即可。我們可以通過以下代碼來設置每一塊的尺寸大小：

:root {
--size: 100px; /* 此處可以根據自己的需求修改 */
}
.puzzle .piece {
width: calc(2 * var(--size));
height: calc(2 * var(--size));
background-size: calc(4 * var(--size)) calc(2 * var(--size));
}

這款簡易的CSS拼圖素材可以幫助我們制作出一款瀏覽器內置游戲“推箱子”的可玩版，讓你在休閑時刻得到完美的放松。