CSS可以使用各種形狀和樣式來創建矩形，以下是一個簡單的教程，介紹如何使用CSS創建矩形：

## 創建矩形

使用CSS，我們可以使用矩形形狀和樣式來創建矩形。矩形可以通過CSS的`border`屬性和`width`和`height`屬性來創建。下面是一個創建矩形的示例：

```html

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

這是一個矩形。

</div>

在上面的代碼中，我們使用了`border`屬性來創建紅色邊框，并設置了寬度和高度。

## 使用CSS的`box-shadow`屬性

除了`border`屬性外，我們還可以使用CSS的`box-shadow`屬性來創建陰影效果。使用`box-shadow`屬性，我們可以在矩形周圍添加陰影，如下所示：

```html

<div style="border: 1px solid red; width: 200px; height: 100px; box-shadow: 0px 0px 10px rgba(0,0,0,0.3);">

這是一個矩形。

</div>

在上面的代碼中，我們使用了`box-shadow`屬性，設置了0px 0px 10px rgba(0,0,0,0.3)的陰影效果，這個值可以控制陰影的顏色和大小。

## 使用CSS的`transform`屬性

除了陰影效果外，我們還可以使用CSS的`transform`屬性來旋轉和縮放矩形。使用`transform`屬性，我們可以設置矩形的大小和位置。以下是一個旋轉矩形的示例：

```html

<div style="border: 1px solid red; width: 200px; height: 100px; transform: rotate(45deg);">

這是一個矩形。

</div>

在上面的代碼中，我們使用了`transform`屬性，設置了45deg的旋轉角度，并使用`rotate`關鍵字設置了旋轉方式。

## 總結

通過上述教程，我們可以看到使用CSS可以創建多種類型的矩形，包括圓形、橢圓形、直角形等。同時，我們還可以使用CSS的`box-shadow`屬性和`transform`屬性來創建陰影效果和旋轉和縮放矩形。