css中radial-gradient()有什么用

這篇文章主要介紹了css中radial-gradient()有什么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

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

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

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

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

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

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

　　徑向漸變語法是：

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

　　舉個例子：

　　background:radial-gradient(5emcircleattopleft,yellow,blue)

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

　　1.jpg

　　參數分析如下：

　　<position>:

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

　　<ending-shape>:

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

　　<size>:

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

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

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

　　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(ellipseatcenter,yellow0%,green100%);

　　radial-gradient(farthest-cornerat50%50%,yellow,green);

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css中radial-gradient()有什么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!