CSS多圖片方框是一種常見的網頁設計元素，它可以用來展示多張圖片。下面我們來學習如何使用CSS實現多圖片方框。

HTML代碼：

<div class="box">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>

我們首先需要創建一個div容器，并在其中添加多個img標簽。接著，我們需要設置這個div的樣式來創建多圖片方框。

CSS代碼：

.box {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box img {
width: 200px;
height: 200px;
margin: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

在CSS中，我們使用flex布局來使容器中的圖片自動排列。設置flex-wrap為wrap，可以使圖片自動換行。使用justify-content:center可實現圖片水平居中對齊。對于圖片本身的樣式設置，我們設置了寬高為200px，并添加了10px的外邊距。在最后，使用box-shadow屬性為每個圖片添加了陰影效果。

上述代碼的結果是一個簡單的多圖片方框，您可以根據自己的需求進行修改和優化。