· CSS3 漸變(gradients)可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。

　　· 以前，你必須使用圖像來實現這些效果。但，通過使用 CSS3 漸變(gradients)，你可以減少下載的時間和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變(gradient)是由瀏覽器生成的。

　　· CSS3 定義了三種類型的漸變(gradients)：使用都是background屬性

　　o 一、線性漸變(Linear Gradients)- 向下/向上/向左/向右/對角方向

　　§ 基本語法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

　　o 二、徑向漸變(Radial Gradients)- 由它們的中心定義

　　§ 基本語法:background-image: radial-gradient(shape size at position, start-color, ..., last-color);

　　§ 為了創建一個徑向漸變，你也必須至少定義兩種顏色節點。

　　§ 顏色節點即你想要呈現平穩過渡的顏色。

　　§ 同時，你也可以指定漸變的中心、形狀(圓形或橢圓形)、大小。默認情況下，漸變的中心是 center(表示在中心點)，漸變的形狀是 ellipse(表示橢圓形)，漸變的大小是 farthest-corner(表示到最遠的角落)

　　§ size的取值 closest-side，farthest-side，closest-corner，farthest-corner

　　o 三、重復漸變

　　§ repeating-linear-gradient() 函數用于重復線性漸變：

#grad {

 /* 標準的語法 */

 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

　　§ repeating-radial-gradient() 函數用于重復徑向漸變：

#grad {

 background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

　　更多關于前端培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。