如何使用css radial-gradient()

如何使用css radial-gradient()？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

在css中我們可以通過(guò)設(shè)置漸變（gradients）來(lái)實(shí)現(xiàn)兩個(gè)或多個(gè)指定的顏色之間顯示的平穩(wěn)過(guò)渡。且因?yàn)闈u變（gradient）是由瀏覽器生成的，所以漸變效果的元素在放大時(shí)看起來(lái)效果更好?！鞠嚓P(guān)視頻推薦：css3教程】

在css中可以定義兩種類(lèi)型的漸變（gradients）：

1、線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向

2、徑向漸變（Radial Gradients）- 由它們的中心定義

我們?cè)谥暗奈恼隆綾ss中l(wèi)inear-gradient()可以干什么？linear-gradient()詳解】中已經(jīng)介紹了線性漸變linear-gradient()屬性的使用，在此就不在介紹了。下面我們來(lái)詳細(xì)看看徑向漸變--radial-gradient()屬性的使用。

在徑向漸變中，顏色不是如同線性漸變那樣從漸變盒的一側(cè)平滑地褪色到另一側(cè)，它們反而是從單個(gè)點(diǎn)出現(xiàn)并且以圓形或橢圓形狀平滑地向外擴(kuò)展的。

radial-gradient()是通過(guò)指示漸變的中心（0%的橢圓將會(huì)在哪里）和結(jié)束形狀（100%的橢圓）的大小和形狀來(lái)指定徑向漸變。顏色停止被作為一個(gè)列表給出，這和linear-gradient()是一樣的。從漸變中心開(kāi)始，朝向(并且可能超越)結(jié)束形狀前進(jìn)，根據(jù)指定的顏色停止繪制和著色均勻縮放的同心橢圓。

radial-gradient()屬性的基本語(yǔ)法

徑向漸變語(yǔ)法是：

radial-gradient(  [ <ending-shape> || <size> ] [ at <position> ] ,<color-stop-list> )

舉個(gè)例子：

background: radial-gradient(5em circle at top left, yellow, blue)

定義了一個(gè)5em寬的圓形徑向漸變，其中心位于左上角。

參數(shù)分析如下：

<position>:

確定漸變的中心，可以省略，但如果省略此參數(shù)，則默認(rèn)為居中。

<ending-shape>:

可以設(shè)置circle（圓形）或 ellipse（橢圓形）兩個(gè)值； 確定漸變的結(jié)束形狀分別是圓形還是橢圓形，可以省略。

<size>:

確定漸變的結(jié)束形狀的大小。如果省略，則默認(rèn)為“farthest-corner”。它可以明確地通過(guò)關(guān)鍵字給出。出于關(guān)鍵字定義的目的，請(qǐng)將漸變框邊緣視為在兩個(gè)方向上無(wú)限延伸，而不是有限線段。

如果結(jié)束形狀是橢圓形，則其軸與水平軸和垂直軸對(duì)齊。

當(dāng)定義為圓和橢圓的漸變時(shí)接受以下關(guān)鍵字作為其<size>參數(shù)值：

closest-side：該結(jié)束形狀的尺寸使得它恰好符合的側(cè)漸變框最接近漸變的中心。如果形狀是橢圓形，則它恰好與每個(gè)尺寸中最近的一側(cè)相交。

farthest-side：與closest-side相同，除了最終形狀的大小基于最遠(yuǎn)的一側(cè)。

closest-corner：該結(jié)束形狀的尺寸使得它穿過(guò)的角落漸變框最接近漸變的中心。如果形狀是橢圓形，則給出的結(jié)束形狀具有與指定最近側(cè)時(shí)相同的縱橫比。

farthest-corner：與closest-corner相同，除了最終形狀的大小基于最遠(yuǎn)的角。如果形狀是橢圓形，則結(jié)束形狀的寬高比與指定最遠(yuǎn)側(cè)時(shí)的寬高比相同。

注：

1、如果<ending-shape>被指定為“circle”或被省略，則<size>可以明確地給出：

<length>：明確給出圓的半徑，負(fù)值無(wú)效。

百分比在這里是不被允許的；它們只能用于指定橢圓漸變的大小，而不是圓形漸變的大小。

2、如果將<ending-shape>被指定為“ ellipse”或被省略，則可以將<size>明確指定為：

<length-percentage> {2}：

明確給出橢圓的大小。第一個(gè)值表示水平半徑，第二個(gè)值表示垂直半徑。百分比值相對(duì)于漸變框的相應(yīng)維度。負(fù)值無(wú)效。

徑向漸變示例

示例一：指定基本徑向漸變的不同方法

radial-gradient(yellow, green);
radial-gradient(ellipse at center, yellow 0%, green 100%);
radial-gradient(farthest-corner at 50% 50%, yellow, green);

radial-gradient(circle, yellow, green);

radial-gradient(red, yellow, green);

示例二：顯示了一個(gè)以盒子以外的某點(diǎn)為中心的漸變

radial-gradient(farthest-side at left bottom, red, yellow 50px, green);

示例三：設(shè)置<size>為closest-side 的漸變

radial-gradient(closest-side at 20px 30px, red, yellow, green);
radial-gradient(20px 30px at 20px 30px, red, yellow, green);

radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
radial-gradient(20px 20px at 20px 30px, red, yellow, green);

看完上述內(nèi)容，你們掌握如何使用css radial-gradient()的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！