柚子快報邀請碼778899分享：前端 CSS3 漸變

http://yzkb.51969.com/

CSS3 漸變是用于在網(wǎng)頁上創(chuàng)建平滑的顏色過渡效果的一種功能。它允許從一種顏色過渡到另一種顏色，甚至可以包含多個顏色。CSS3 漸變主要有兩種類型：線性漸變（linear-gradient）和徑向漸變（radial-gradient）。線性漸變沿直線過渡，而徑向漸變則沿圓形或橢圓形過渡。這些漸變效果可以通過 background 屬性應(yīng)用于元素的背景中，使網(wǎng)頁設(shè)計更具視覺吸引力。CSS3 定義了兩種類型的漸變（gradients）：

線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向徑向漸變（Radial Gradients）- 由它們的中心定義

一 線性漸變

線性漸變（linear-gradient）是 CSS3 的一種漸變效果，通過在指定方向上平滑地過渡兩種或多種顏色。漸變沿著一條直線進行，可以通過角度值或關(guān)鍵詞設(shè)置漸變的方向。使用 linear-gradient 函數(shù)時，你可以定義多個顏色及其過渡點，以創(chuàng)建各種視覺效果。

1. 語法

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

direction: 漸變的方向，指定漸變從哪里開始到哪里結(jié)束。color1, color2, …: 漸變中的顏色，可以是兩個或多個顏色。

2. 設(shè)置方向（關(guān)鍵詞簡化漸變方向的設(shè)置）

關(guān)鍵詞可以簡化漸變方向的設(shè)置，包括：

to top：從下到上 to right：從左到右 to bottom：從上到下（默認值） to left：從右到左

線性漸變 - 從上到下（默認情況下）

background-image: linear-gradient(red,yellow,blue);

線性漸變 - 從下到上

background-image: linear-gradient(to top ,red,yellow,blue);

線性漸變 - 從左到右

background-image: linear-gradient(to right,red,yellow,blue);

線性漸變 - 從右到左

background-image: linear-gradient(to left ,red,yellow,blue);

線性漸變 - 對角(左上角開始（到右下角）) 可以通過指定水平和垂直的起始位置來制作一個對角漸變。

background-image: linear-gradient(to bottom right ,red,yellow,blue);

3. 設(shè)置方向（使用角度（deg））

如果你想要在漸變的方向上做更多的控制，你可以定義一個角度，而不用預(yù)定義方向（to bottom、to top、to right、to left、to bottom right，等等）。

語法

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將創(chuàng)建一個從下到上的漸變，90deg 將創(chuàng)建一個從左到右的漸變。

角度值指定漸變的方向，從起點到終點。單位是度（deg），通常從水平線起始點順時針計算。

0deg：從下到上

background-image: linear-gradient(0deg ,red,yellow,blue);

90deg：從左到右

background-image: linear-gradient(90deg ,red,yellow,blue);

45deg：從左上到右下

background-image: linear-gradient(45deg ,red,yellow,blue);

4 重復(fù)的線性漸變(repeating-linear-gradient)

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

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

二 線性漸變

徑向漸變由它的中心定義。

為了創(chuàng)建一個徑向漸變，你也必須至少定義兩種顏色節(jié)點。顏色節(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。

1. 語法

background: radial-gradient(shape size at position, color1, color2, ...);

shape: 漸變的形狀，可以是 circle 或 ellipse（默認是 ellipse）。circle 表示圓形，ellipse 表示橢圓形

background-image: radial-gradient(circle, red, yellow, blue)

size: 漸變的大小，如 closest-side, farthest-corner 等。

closest-side

含義: 漸變的大小將延伸到離中心點最近的邊緣（即邊界）。 效果: 如果你的元素比較小，漸變的范圍會相對較??；如果元素較大，漸變會填滿元素的最近邊界。

background-image: radial-gradient(closest-side, red, yellow, blue)

farthest-side

含義: 漸變的大小將延伸到離中心點最遠的邊緣。 效果: 漸變會擴展到元素的最遠邊界，使?jié)u變填滿整個元素。

background-image: radial-gradient(farthest-side, red, yellow, blue)

closest-corner

含義: 漸變的大小將延伸到離中心點最近的角落。 效果: 漸變會延伸到元素的最近角落，使得漸變的范圍受元素角落的限制。

background-image: radial-gradient(closest-corner, red, yellow, blue)

farthest-corner

含義: 漸變的大小將延伸到離中心點最遠的角落。 效果: 漸變會擴展到元素的最遠角落，使?jié)u變的范圍最大化。

background-image: radial-gradient(farthest-corner, red, yellow, blue)

position: 漸變的起始位置，如 center, top left 等。**

center

含義: 漸變從元素的中心開始。 效果: 漸變將從元素的中心向外擴展。

background: radial-gradient(circle at center, red, blue);

top left, top right, bottom left, bottom right

含義: 漸變從元素的指定角落開始。 效果: 漸變會從元素的角落向外擴展。

background: radial-gradient(circle at top right, green, yellow);

top, bottom, left, right

含義: 漸變從元素的邊緣中點開始。 效果: 漸變將從指定邊緣的中點開始擴展。

background: radial-gradient(circle at top, orange, purple);

自定義位置

含義: 可以使用 x% y% 或 xpx ypx 來指定漸變的起始位置。 效果: 漸變從自定義的具體位置開始。

background: radial-gradient(circle at 20% 30%, pink, blue);

color1, color2, …: 漸變中的顏色，可以有兩個或多個。

柚子快報邀請碼778899分享：前端 CSS3 漸變

http://yzkb.51969.com/

相關(guān)鏈接