CSS3 變色背景

CSS3 中有一個十分實用的屬性，那就是用于改變元素背景顏色的background-color屬性。通過在該屬性中加入linear-gradient()或者radial-gradient()函數，就可以讓元素擁有更加豐富的背景效果

下面是一些使用線性漸變函數實現的例子：

/* 從左到右漸變的紅色背景 */
background-color: linear-gradient(to right, #FF0000, #0000FF);
/* 從上到下漸變的綠色背景 */
background-color: linear-gradient(to bottom, #00FF00, #FF0000);
/* 對角線漸變的紫色背景 */
background-color: linear-gradient(to bottom right, #800080, #FF00FF);

這里分別使用了方向參數to right、to bottom和to bottom right來指定漸變方向。同時還使用了兩種顏色，第一個顏色為起始顏色，第二個顏色為結束顏色。

下面是一些使用徑向漸變函數實現的例子：

/* 從中心點擴散出去的黃色背景 */
background-color: radial-gradient(#FFFF00, #FF0000);
/* 橢圓形擴散的紅色背景 */
background-color: radial-gradient(ellipse at center, #FF6347, #FF0000);
/* 多中心點擴散的藍色背景 */
background-color: radial-gradient(circle at 40% 60%, #0000FF, #00FFFF);

這里使用了不同的形狀參數（默認為圓形），如ellipse表示橢圓形，at center表示中心點，以及一些坐標參數。同樣，也使用了兩種顏色來實現漸變效果。

總之，使用 CSS3 的漸變背景可以讓頁面更加美觀，同時也可以避免使用大量圖片造成的性能問題。