1. 引言

CSS3 漸變能夠在指定顏色之間創建平滑過渡效果。這種設計元素不僅能為網頁增添豐富的視覺層次，更是現代網頁設計的重要組成部分。CSS3 提供兩種主要的漸變類型：線性漸變(Linear Gradient) - 沿直線方向進行顏色過渡；徑向漸變(Radial Gradient) - 以中心點為起點向外擴散的顏色變化。

2. 線性漸變（Linear Gradients）

2.1 基本語法

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

2.2 方向設置

• 使用角度：

/* 0deg 從下到上 */
/* 45deg 從左下角到右上角 */
/* 90deg 從左到右 */
/* 180deg 從上到下 */
/* 270deg 從右到左 */
.angle-gradient {background: linear-gradient(45deg, #ff0000, #00ff00);
}

效果圖：

• 使用關鍵詞：

/* 可用值：to top, to bottom, to left, to right, to top left, to top right 等 */
.keyword-gradient {background: linear-gradient(to right, #ff0000, #00ff00);
}

效果圖：

2.3 顏色節點設置

/* 使用百分比控制顏色分布 */
.color-stops {background: linear-gradient(to right,red 0%,orange 25%,yellow 50%,green 75%,blue 100%);
}

效果圖：

3. 徑向漸變（Radial Gradients）

3.1 基本語法

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

3.2 形狀和大小

形狀配置

• circle：生成圓形漸變。
• ellipse：生成橢圓形漸變（默認值）。

大小配置

• closest-side：漸變結束于離中心最近的邊。
• farthest-side：漸變結束于離中心最遠的邊。
• closest-corner：漸變結束于離中心最近的角。
• farthest-corner：漸變結束于離中心最遠的角（默認值）。

/* 圓形漸變 */
.circle-gradient {background: radial-gradient(circle, #ff0000, #00ff00);
}/* 橢圓形漸變 */
.ellipse-gradient {background: radial-gradient(ellipse, #ff0000, #00ff00);
}/* 大小配置 */
background: radial-gradient(closest-side circle, red, blue);

效果圖

3.3 位置設置

/* 使用關鍵詞 */
.position-gradient {background: radial-gradient(circle at center, #ff0000, #00ff00);
}/* 使用具體值 */
.custom-position {background: radial-gradient(circle at 100px 100px, #ff0000, #00ff00);
}

效果圖：

4. 重復漸變

4.1 重復線性漸變

.repeating-linear {background: repeating-linear-gradient(45deg,#ff0000 0px,#ff0000 10px,#00ff00 10px,#00ff00 20px);
}

效果圖：

4.2 重復徑向漸變

.repeating-radial {background: repeating-radial-gradient(circle at center,#ff0000 0px,#ff0000 10px,#00ff00 10px,#00ff00 20px);
}

5. 高級技巧

5.1 多重漸變疊加

.multiple-gradients {background: linear-gradient(45deg, rgba(255,0,0,0.5), transparent),linear-gradient(-45deg, rgba(0,0,255,0.5), transparent);
}

效果圖：

5.2 漸變文字效果

.gradient-text {background: linear-gradient(45deg, #ff0000, #00ff00);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}

效果圖：

6. 瀏覽器兼容性

為了確保在不同瀏覽器中正常顯示漸變效果，建議添加瀏覽器前綴：

.cross-browser-gradient {background: -webkit-linear-gradient(left, #ff0000, #00ff00);    /* Safari 5.1-6 */background: -o-linear-gradient(right, #ff0000, #00ff00);        /* Opera 11.1-12 */background: -moz-linear-gradient(right, #ff0000, #00ff00);      /* Firefox 3.6-15 */background: linear-gradient(to right, #ff0000, #00ff00);        /* 標準語法 */
}