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

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：主機域名、網(wǎng)站空間、營銷軟件、網(wǎng)站建設、麥蓋提網(wǎng)站維護、網(wǎng)站推廣。

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

在css中可以定義兩種類型的漸變（gradients）：

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

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

我們在之前的文章【css中l(wèi)inear-gradient()可以干什么？linear-gradient()詳解】中已經(jīng)介紹了線性漸變linear-gradient()屬性的使用，在此就不在介紹了。下面我們來詳細看看徑向漸變--radial-gradient()屬性的使用。

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

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

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

徑向漸變語法是：

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

舉個例子：

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

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

參數(shù)分析如下：

<position>:

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

<ending-shape>:

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

<size>:

確定漸變的結束形狀的大小。如果省略，則默認為“farthest-corner”。它可以明確地通過關鍵字給出。出于關鍵字定義的目的，請將漸變框邊緣視為在兩個方向上無限延伸，而不是有限線段。

如果結束形狀是橢圓形，則其軸與水平軸和垂直軸對齊。

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

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

farthest-side：與closest-side相同，除了最終形狀的大小基于最遠的一側。

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

farthest-corner：與closest-corner相同，除了最終形狀的大小基于最遠的角。如果形狀是橢圓形，則結束形狀的寬高比與指定最遠側時的寬高比相同。

注：

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

<length>：明確給出圓的半徑，負值無效。

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

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

<length-percentage> {2}：

明確給出橢圓的大小。第一個值表示水平半徑，第二個值表示垂直半徑。百分比值相對于漸變框的相應維度。負值無效。

徑向漸變示例

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

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

示例二：顯示了一個以盒子以外的某點為中心的漸變

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

示例三：設置<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);

看完上述內容，你們掌握如何使用css radial-gradient()的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當前標題：如何使用cssradial-gradient()
文章位置：http://aaarwkj.com/article26/jjjccg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供響應式網(wǎng)站、外貿(mào)建站、App開發(fā)、自適應網(wǎng)站、網(wǎng)站設計公司、云服務器

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)