谷歌瀏覽器中的 CSS 漸變是非常常用的一種效果，它可以實現(xiàn)平滑的過渡效果，從而使頁面更加精美。下面我們就來了解一下 CSS 漸變的使用方法。

/* 線性漸變 */
background: linear-gradient(direction, color-stop1, color-stop2, ...);
/* 徑向漸變 */
background: radial-gradient(shape size at position, start-color, ..., last-color);

上面是 CSS 漸變的兩種基本用法，一種是線性漸變，一種是徑向漸變。下面我們來詳細解釋一下這兩種漸變的使用方法。

線性漸變

使用線性漸變時，首先需要指定漸變的方向。例如，可以指定從上往下漸變，也可以指定從左往右漸變。方向的指定方式如下：

/* 從上往下漸變 */
background: linear-gradient(to bottom, white, black);
/* 從左往右漸變 */
background: linear-gradient(to right, white, black);

上述代碼中，使用了 to bottom 和 to right 兩個關(guān)鍵詞來指定漸變的方向。接下來，還需要指定漸變的顏色和位置，以此來定義漸變的過程。例如，下面的代碼定義了從左往右漸變的過程，漸變的顏色分別是白色和黑色，分別在 30% 和 70% 的位置上進行：

background: linear-gradient(to right, white 30%, black 70%);

徑向漸變

使用徑向漸變時，需要指定漸變的形狀、大小、位置，以及起始顏色和結(jié)束顏色。例如，下面的代碼定義了一個以圓形為形狀，以右上角為位置，從白色到黑色的徑向漸變：

background: radial-gradient(circle at top right, white, black);

在上述代碼中，使用了 circle 關(guān)鍵詞指定了徑向漸變的形狀為圓形，使用了 at top right 指定了位置為右上角。

以上就是谷歌瀏覽器中 CSS 漸變的基本用法了。希望這篇文章對大家有所幫助。