<div> 是HTML中的一個標簽，常用于將網頁內容進行分塊。但是，除了用于布局和結構之外，<div> 標簽也常被用來創建方塊樣式。在這篇文章中，我們將討論如何使用CSS來創建方塊，并且通過幾個代碼案例來詳細解釋說明。
代碼案例1：基本方塊樣式 使用下面的代碼來創建一個基本的方塊樣式：

<style>
.square {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<br>
<div class="square"></div>

在上述代碼中，我們使用了CSS選擇器.square來為<div>元素添加樣式。通過指定width和height屬性，我們設置了方塊的寬度和高度為200像素。background-color屬性用于設置方塊的背景顏色為藍色。通過將樣式與<div>元素的class屬性關聯起來，我們實現了一個簡單的藍色方塊。
代碼案例2：帶邊框的方塊樣式 接下來，我們將通過下面的代碼案例來創建一個帶邊框的方塊樣式：

<style>
.square {
width: 200px;
height: 200px;
background-color: blue;
border: 2px solid red;
}
</style>
<br>
<div class="square"></div>

經過修改，我們在前面的代碼基礎上添加了border屬性。通過這個屬性，我們設置了方塊的邊框樣式為紅色實線，并且邊框的寬度為2像素。這樣，我們就得到了一個具有邊框的藍色方塊。
代碼案例3：帶陰影的方塊樣式 下面的代碼案例演示了如何為方塊添加陰影效果：

<style>
.square {
width: 200px;
height: 200px;
background-color: blue;
border: 2px solid red;
box-shadow: 5px 5px 5px gray;
}
</style>
<br>
<div class="square"></div>

在這個代碼中，我們使用了box-shadow屬性來為方塊添加陰影。5px 5px 5px gray參數分別表示陰影的水平偏移、垂直偏移、模糊半徑和顏色。通過設置這些參數，我們為方塊添加了一個灰色的陰影效果。
通過這幾個代碼案例，我希望你已經對如何使用CSS來創建方塊樣式有了一定的了解。當然，這只是CSS中方塊樣式的冰山一角。你可以根據自己的需要，進一步探索和嘗試不同的方塊樣式，以創造出更加獨特和豐富的網頁設計。希望你享受編寫方塊樣式的過程！</div>