CSS3 漸變

Created: October-16, 2018

CSS3 漸變功能允許你在不使用任何影象的情況下建立從一種顏色到另一種顏色的漸變。

使用 CSS3 漸變

CSS3 漸變功能提供了一種靈活的解決方案，可在兩種或多種顏色之間生成平滑過渡。早些時候，為了達到這樣的效果，我們不得不使用影象。使用 CSS3 漸變可以減少下載時間並節省頻寬使用。具有漸變的元素可以在不損失質量的情況下按比例放大或縮小，並且輸出將呈現得更快，因為它是由瀏覽器生成的。

漸變有兩種樣式：線性和徑向。

建立 CSS3 線性漸變

要建立線性漸變，你必須至少定義兩個色標。但是，要建立更復雜的漸變效果，你可以定義更多色標。顏色停止是你想要渲染平滑過渡的顏色。你還可以設定應用漸變效果的起點和方向（或角度）。使用關鍵字建立線性漸變的基本語法可以通過以下方式給出：

linear-gradient (direction, color-stop1, color-stop2, ...)

線性漸變 - 從上到下

以下示例將從上到下建立線性漸變。這是預設的。

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, yellow);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(red, yellow);
    /* Standard syntax */
    background: linear-gradient(red, yellow);
}

線性漸變 - 從左到右

以下示例將從左到右建立線性漸變。

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left, red, yellow);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(left, red, yellow);
    /* Standard syntax */
    background: linear-gradient(to right, red, yellow);
}

線性漸變 - 對角線

你還可以沿對角線方向建立漸變。以下示例將從元素框的左下角到右上角建立線性漸變。

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(bottom left, red, yellow);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(bottom left, red, yellow);
    /* Standard syntax */
    background: linear-gradient(to top right, red, yellow);
}

用角度設定線性梯度的方向

如果你想要更多地控制漸變的方向，可以設定角度，而不是預定義的關鍵字。角度 0deg 建立從下到上的漸變，正角度表示順時針旋轉，這意味著角度 90deg 建立從左到右的漸變。使用角度建立線性漸變的基本語法可以通過以下方式給出：

linear-gradient (angle, color-stop1, color-stop2, ...)

以下示例將使用角度從左到右建立線性漸變。

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(0deg, red, yellow);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(0deg, red, yellow);
    /* Standard syntax */
    background: linear-gradient(90deg, red, yellow);
}

使用多個顏色停止建立線性漸變

你還可以為兩種以上的顏色建立漸變。以下示例將向你展示如何使用多個色標來建立線性漸變。所有顏色均勻分佈。

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, yellow, lime);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(red, yellow, lime);
    /* Standard syntax */
    background: linear-gradient(red, yellow, lime);
}

設定位置顏色停止

顏色停止是沿著漸變線的點，在該位置具有特定顏色。色標的位置可以指定為百分比，也可以指定為絕對長度。你可以指定任意數量的色塊，以達到所需的效果。

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(red, yellow 30%, lime 60%);
    /* Standard syntax */
    background: linear-gradient(red, yellow 30%, lime 60%);
}

注意： 將顏色停止位置設定為百分比時， 0% 表示起點，而 100% 表示結束點。但是，你可以使用該範圍之外的值，即用小於 0% 或大於 100% 的值來獲得所需效果。

重複線性漸變

你可以使用此 repeating-linear-gradient() 功能重複線性漸變。

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: white;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
    /* For Internet Explorer 10 */
    background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
    /* Standard syntax */
    background: repeating-linear-gradient(black, white 10%, lime 20%);
}

建立 CSS3 徑向漸變

在徑向漸變顏色中，從單個點出現並以圓形或橢圓形狀向外平滑地擴散，而不是像線性梯度那樣在單個方向上從一種顏色漸變到另一種顏色。建立徑向漸變的基本語法可以通過以下方式給出：

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

該 radial-gradient() 函式的引數具有以下含義：

position - 指定漸變的起始點，可以以單位（px，em 或百分比）或關鍵字（left，bottom 等）指定。
shape - 指定漸變的結束形狀的形狀。它可以是圓形或橢圓形。
size - 指定漸變的結束形狀的大小。預設是 farthest-side 。

以下示例將顯示你建立具有均勻間隔色標的徑向漸變。

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-radial-gradient(red, yellow, lime);
    /* For Internet Explorer 10 */
    background: -ms-radial-gradient(red, yellow, lime);
    /* Standard syntax */
    background: radial-gradient(red, yellow, lime);
}

設定徑向漸變的形狀

radial-gradient() 函式的 shape 引數用於定義徑向漸變的結束形狀。它可以取值為 circle 或 ellipse 。這是一個例子：

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-radial-gradient(circle, red, yellow, lime);
    /* For Internet Explorer 10 */
    background: -ms-radial-gradient(circle, red, yellow, lime);
    /* Standard syntax */
    background: radial-gradient(circle, red, yellow, lime);
}

注意： 如果省略或未指定 shape 引數，則如果大小為單個長度，則結束形狀預設為圓形，否則為橢圓形。

設定徑向漸變的大小

radial-gradient() 函式的 size 引數用於定義漸變結束形狀的大小。大小可以用單位或關鍵字進行設定： closest-side ， farthest-side ， closest-corner ， farthest-corner 。

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
    /* For Internet Explorer 10 */
    background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
    /* Standard syntax */
    background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}

重複徑向梯度

你也可以使用 repeating-radial-gradient() 功能重複徑向漸變。

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: white;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
    /* For Internet Explorer 10 */
    background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
    /* Standard syntax */
    background: repeating-radial-gradient(black, white 10%, lime 20%);
}

CSS3 透明度和漸變

CSS3 漸變也支援透明度。堆疊多個背景時，你可以使用此功能在背景影象上建立淡入淡出效果。

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: url("images/sky.jpg");
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
    /* Standard syntax */
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
}