CSS是網頁設計中非常重要的一環，今天我來介紹一下如何使用CSS設置一個炫酷的盒子相冊。

/* 設置盒子相冊的樣式 */
.album {
display: flex;  /* 讓盒子相冊成為一個彈性盒子 */
flex-wrap: wrap;  /* 長度超過容器時換行 */
}
.album img {
width: 200px;  /* 相片的寬度 */
height: 200px;  /* 相片的高度 */
margin: 10px;  /* 相片之間的間隔 */
border-radius: 10px;  /* 相片圓角 */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);  /* 相片的陰影 */
transition: 0.3s transform;  /* 相片的變換時間 */
}
.album img:hover {
transform: scale(1.1);  /* 鼠標移到相片上時的變換 */
}

以上代碼中，我們使用了彈性盒子的布局，讓相片自動換行。每個相片都有寬度、高度、圓角和陰影的樣式，鼠標懸浮上去時會放大1.1倍。相片變大的過程可以通過CSS3的transform屬性來實現。

現在，我們來看看HTML代碼如何使用CSS設置樣式：

<div class="album">
<img src="photo1.jpg" alt="Photo 1">
<img src="photo2.jpg" alt="Photo 2">
<img src="photo3.jpg" alt="Photo 3">
<img src="photo4.jpg" alt="Photo 4">
<img src="photo5.jpg" alt="Photo 5">
<img src="photo6.jpg" alt="Photo 6">
</div>

我們使用了一個div元素來包含這些相片，這樣就可以方便地應用CSS樣式。每個相片使用了img元素，并指定了相片的路徑和描述。這個盒子相冊看起來非常簡潔，但使用CSS的魔力可以讓它變得非常炫酷。