CSS3如何實現漸變效果

在CSS3中，可以使用linear-gradient()和radial-gradient()函數來實現漸變效果。這兩種函數分別用于創建線性漸變和徑向漸變。

1. 線性漸變（Linear Gradient）

線性漸變是沿著一條直線路徑的顏色過渡。使用linear-gradient()函數創建線性漸變，基本語法如下：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction：可選值有to top、to right、to bottom、to left、angle（角度值）等，表示漸變的方向。
• color-stop：表示顏色過渡的點，可以是顏色值，也可以是百分比或像素值。

示例：

/* 從上到下的線性漸變 */
background-image: linear-gradient(to bottom, red, yellow);

/* 從左上角到右下角的線性漸變，角度為45度 */
background-image: linear-gradient(45deg, red, yellow);

2. 徑向漸變（Radial Gradient）

徑向漸變是從一個中心點向外擴散的顏色過渡。使用radial-gradient()函數創建徑向漸變，基本語法如下：

background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

• shape：可選值有circle（圓形）和ellipse（橢圓形），表示漸變的形狀。
• size：可選值有closest-side、farthest-side、closest-corner、farthest-corner、具體尺寸值等，表示漸變的大小。
• position：可選值有center、top、right、bottom、left、x% y%等，表示漸變的位置。
• color-stop：表示顏色過渡的點，可以是顏色值，也可以是百分比或像素值。

示例：

/* 圓形徑向漸變，從中心到邊緣 */
background-image: radial-gradient(circle, red, yellow);

/* 橢圓形徑向漸變，從中心到右下角 */
background-image: radial-gradient(ellipse at bottom right, red, yellow);

通過調整linear-gradient()和radial-gradient()函數的參數，可以實現各種復雜的漸變效果。