在網站開發中，經常需要為元素添加背景圖形來美化頁面。在 CSS 中，繪制背景圖形有多種方式，包括使用圖片、漸變色、邊框等。本文將介紹如何使用 CSS 繪制背景圖形。

使用圖片作為背景圖形

在 CSS 中，使用圖片作為背景圖形較為常見。可以通過設置background-image屬性來實現。例如：

.example {
background-image: url("example.jpg");
}

上述例子中，類名為example的元素將添加一張名為example.jpg的圖片作為背景圖形。

使用漸變色作為背景圖形

CSS 中還可以使用漸變色作為背景圖形，可以設置linear-gradient或radial-gradient。例如：

.example {
background-image: linear-gradient(to bottom right, teal, darkturquoise);
}

上述例子中，類名為example的元素將添加一個從左上至右下、顏色為teal到darkturquoise的漸變背景圖形。

使用邊框作為背景圖形

在 CSS 中，也可以使用元素的邊框作為背景圖形。通過設置兩個不同顏色的邊框，并將其中一個邊框設置為透明，就可以創建出邊框背景圖形。例如：

.example {
border: 20px solid transparent;
border-image: linear-gradient(to bottom right, teal, darkturquoise) 1;
}

上述例子中，類名為example的元素將添加一個顏色為teal到darkturquoise的漸變背景邊框。

使用 CSS 繪制背景圖形不僅可以美化頁面，而且還能實現動畫、交互效果等。需要根據實際需求選擇不同的方式。