柚子快報(bào)邀請(qǐng)碼778899分享：前端 CSS3 漸變

http://yzkb.51969.com/

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

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

一 線性漸變

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

1. 語(yǔ)法

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

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

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

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

to top：從下到上 to right：從左到右 to bottom：從上到下（默認(rèn)值） to left：從右到左

線性漸變 - 從上到下（默認(rèn)情況下）

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);

線性漸變 - 對(duì)角(左上角開(kāi)始（到右下角）) 可以通過(guò)指定水平和垂直的起始位置來(lái)制作一個(gè)對(duì)角漸變。

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

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

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

語(yǔ)法

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

角度是指水平線和漸變線之間的角度，逆時(shí)針?lè)较蛴?jì)算。換句話說(shuō)，0deg 將創(chuàng)建一個(gè)從下到上的漸變，90deg 將創(chuàng)建一個(gè)從左到右的漸變。

角度值指定漸變的方向，從起點(diǎn)到終點(diǎn)。單位是度（deg），通常從水平線起始點(diǎn)順時(shí)針計(jì)算。

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)建一個(gè)徑向漸變，你也必須至少定義兩種顏色節(jié)點(diǎn)。顏色節(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過(guò)渡的顏色。同時(shí)，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認(rèn)情況下，漸變的中心是 center（表示在中心點(diǎn)），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠(yuǎn)的角落）。

1. 語(yǔ)法

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

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

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

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

closest-side

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

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

farthest-side

含義: 漸變的大小將延伸到離中心點(diǎn)最遠(yuǎn)的邊緣。 效果: 漸變會(huì)擴(kuò)展到元素的最遠(yuǎn)邊界，使?jié)u變填滿整個(gè)元素。

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

closest-corner

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

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

farthest-corner

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

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

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

center

含義: 漸變從元素的中心開(kāi)始。 效果: 漸變將從元素的中心向外擴(kuò)展。

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

top left, top right, bottom left, bottom right

含義: 漸變從元素的指定角落開(kāi)始。 效果: 漸變會(huì)從元素的角落向外擴(kuò)展。

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

top, bottom, left, right

含義: 漸變從元素的邊緣中點(diǎn)開(kāi)始。 效果: 漸變將從指定邊緣的中點(diǎn)開(kāi)始擴(kuò)展。

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

自定義位置

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

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

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

柚子快報(bào)邀請(qǐng)碼778899分享：前端 CSS3 漸變

http://yzkb.51969.com/

相關(guān)鏈接