Css3漸變 Gradients 徑向漸變

2022-02-26 13:36:35 字數 2402 閱讀 5262

css3徑向漸變-radial-gradient()/repeating-radial-gradient()

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

建立徑向漸變,至少定義兩種顏色節點,呈現平穩過度的顏色。同時,你也可以指定漸變中心、形狀(圓形或橢圓形)、大小。

預設情況下,漸變的中心是center(表示在中心),漸變的形狀是ellipse(表示橢圓形),變天的大小是farthest-corner(表示到最遠的角落)

語法:

background: radial-gradient(center, shape size, start-color, ..., last-color);
徑向漸變由它的中心定義。

為了建立乙個徑向漸變,你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。

同時,你也可以指定漸變的中心、形狀(原型或橢圓形)、大小。預設情況下,漸變的中心是 center(表示在中心點),漸變的形狀是 ellipse(表示橢圓形),漸變的大小是 farthest-corner(表示到最遠的角落)。

radial-gradient([|| ,]?  [,]? , [, ]*);
引數說明

:用來定義徑向漸變的圓心位置,類似background-position,預設為center。可用關鍵字top、left、bottom、right、center、、。

是角度,單位為deg

:定義徑向漸變的形狀,有兩個可選值「circle」和「ellipse」

:用來確定徑向漸變的結束形狀大小,預設值為「farthest-corner」,其他值:

closest-side:指定徑向漸變的半徑長度為從圓心到離圓心最近的邊; closest-corner:指定徑向漸變的半徑長度為從圓心到離圓心最近的角; farthest-side:指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊; farthest-corner:指定徑向漸變的半徑長度為從圓心到離圓心最遠的角;

= [ | ]:

:指漸變的起止顏色。

:用長度值指定起止色位置,不允許負值。

:用百分比指定起止色位置。

舉例:

background: radial-gradient(white 2%, green 10%, orange 50%);

background-image: radial-gradient(circle, white, white, green);

background-image: radial-gradient(15px at 25px 25px, transparent, transparent, transparent, transparent, green);

1.徑向漸變-預設情況下,顏色結點均勻分布

2.徑向漸變-指定形狀

3.徑向漸變-指定位置

4.徑向漸變-顏色不均勻:

5.徑向漸變-大小指定,不同尺寸大小關鍵字的使用,

6.重複徑向漸變-repeating-radial-gradient()

更多:css3漸變(gradients)-線性漸變

什麼是CSS3 漸變(Gradients)

css3 定義了兩種型別的漸變 gradients 線性漸變 linear gradients 向下 向上 向左 向右 對角方向 徑向漸變 radial gradients 由它們的中心定義 1,css3 線性漸變 為了建立乙個線性漸變,你必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色...

CSS3顏色漸變

漸變帶來了色彩巨大的展現。可謂不可不學 是故收集整理,權當乙個小教程吧。一 線性漸變在mozilla下的應用 語法 moz linear gradient 引數 其共有三個引數,第乙個引數表示線性漸變的方向,top是從上到下 left是從左到右,如果定義成lefttop,那就是從左上角到右下角。第二...

詳解CSS3漸變

漸變,指形狀或顏色的有規律性的變化,往往可以給人很強的節奏感和審美情趣,這裡研究的主要是顏色的漸變。漸變的形式在日常生活中很常見,在網頁中的用的也很多,傳統網頁技術中往往用來實現漸變,容易帶來載入負擔和動態定製的瓶頸。css3提供了實現漸變的屬性,隨著瀏覽器的逐步支援,研究css3漸變已勢在必行。涉...