最常見的三種CSS3漸變類型

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

　　· 以前，你必須使用圖像來實現(xiàn)這些效果。但，通過使用 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);

　　§ 為了創(chuàng)建一個徑向漸變，你也必須至少定義兩種顏色節(jié)點。

　　§ 顏色節(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。

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

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

　　o 三、重復(fù)漸變

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

#grad {

 /* 標準的語法 */

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

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

#grad {

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

　　更多關(guān)于前端培訓(xùn)的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗，采用全程面授高品質(zhì)、高體驗培養(yǎng)模式，擁有國內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，助力更多學(xué)員實現(xiàn)高薪夢想。