<div> 是 HTML 中的一個重要元素，可以用來創建各種類型的布局和結構。div 元素可以被用于畫矩形，實現各種樣式的矩形框。在本文中，我們將通過幾個代碼案例詳細解釋如何使用 div 元素來畫矩形。
，我們可以使用 CSS 的 border 屬性來為 div 元素創建一個簡單的矩形。border 屬性可以設置矩形的邊框寬度、樣式和顏色。下面是一個示例代碼：

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

在上面的代碼中，我們創建了一個寬度為 200px、高度為 100px 的 div 元素，并為其添加了一個 1px 寬度的黑色實線邊框。通過調整 width 和 height 屬性的值，我們可以改變矩形的大小。通過修改 border 屬性的值，我們可以改變邊框的寬度、樣式和顏色。
除了使用 border 屬性，我們還可以使用 CSS 的 background-color 屬性為 div 元素添加背景顏色，從而使矩形具有填充效果。下面是一個示例代碼：

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

在上面的代碼中，我們在原有的矩形基礎上添加了一個紅色的背景色。通過修改 background-color 屬性的值，我們可以改變矩形的填充顏色。
除了基本的矩形外，我們還可以通過配合使用 CSS 的 border-radius 屬性和 box-shadow 屬性來創建不規則的矩形。border-radius 屬性可以使矩形的邊角變得圓滑，而 box-shadow 屬性可以添加陰影效果。下面是一個示例代碼：

<div style="width: 200px; height: 100px; border: 1px solid black; border-radius: 20px; box-shadow: 2px 2px 5px gray;"></div>

在上面的代碼中，我們在原有的矩形基礎上使用 border-radius 屬性將矩形的邊角變得圓滑，使用 box-shadow 屬性添加了一個灰色的陰影效果。通過調整 border-radius 屬性的值，我們可以改變矩形邊角的圓滑程度。通過修改 box-shadow 屬性的值，我們可以調整陰影的位置、大小和顏色。
總之，通過使用 div 元素和 CSS 屬性，我們可以靈活地創建各種類型的矩形。通過調整相應的屬性值，我們可以改變矩形的大小、樣式、填充顏色和邊角圓滑程度等。希望本文對您理解如何使用 div 畫矩形有所幫助。