CSS中的<div>元素是一個常見的容器元素，用于組織和布局網頁上的各個部分。通過使用<div>元素，我們可以創建矩形的區塊，并對其進行樣式化。在本文中，我們將詳細介紹如何使用CSS來創建具有不同樣式的矩形。

，讓我們來看一個簡單的例子。假設我們希望創建一個寬度為200像素、高度為100像素的矩形，背景顏色為紅色。我們可以使用以下的CSS代碼來實現這個效果：

<div style="width: 200px; height: 100px; background-color: red;"></div>

在上面的代碼中，我們給<div>元素應用了寬度、高度和背景顏色這三個樣式屬性。通過指定width屬性為200像素，height屬性為100像素，并將background-color屬性設置為紅色，我們成功地創建了一個紅色的200x100像素的矩形。

接下來，讓我們來實現一個帶邊框的矩形。我們可以使用border屬性來為<div>元素添加邊框。以下是一個具有藍色邊框的矩形的代碼示例：

<div style="width: 200px; height: 100px; border: 2px solid blue;"></div>

在上面的代碼中，我們使用border屬性來定義邊框的樣式。這里，我們設置邊框的寬度為2像素，邊框的樣式為實線（solid），邊框的顏色為藍色。通過添加這些樣式屬性，我們成功地在200x100像素的矩形周圍創建了一個藍色的邊框。

除了背景顏色和邊框，我們還可以對矩形進行更多的樣式化，例如改變文本樣式、添加陰影效果等。讓我們以改變文本樣式為例，來創建一個具有白色背景、黑色文本的矩形：

<div style="width: 200px; height: 100px; background-color: white; color: black;">
<p>這是一個帶文本的矩形</p>
</div>

在上面的代碼中，我們使用了background-color樣式屬性來設置背景顏色為白色，color樣式屬性來設置文本顏色為黑色。通過在<div>元素內添加一個

元素，并在其中輸入希望顯示的文本內容，我們成功創建了一個具有白色背景、黑色文本的矩形。

通過以上的例子，我們可以看到，在CSS中，<div>元素可以被輕松地樣式化為任何形狀、大小和樣式的矩形。通過使用不同的樣式屬性，例如width、height、background-color、border等，我們可以自由地定制<div>元素的樣式，以滿足我們對矩形的不同需求。