這篇“CSS3徑向漸變的方法”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS3徑向漸變的方法”文章吧。

CSS3徑向漸變

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

為了創建一個徑向漸變，你也必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認情況下，漸變的中心是center（表示在中心點），漸變的形狀是ellipse（表示橢圓形），漸變的大小是farthest-corner（表示到最遠的角落）。

語法

background-image:radial-gradient(shapesizeatposition,start-color,...,last-color);

徑向漸變-顏色節點均勻分布（默認情況下）

實例

顏色節點均勻分布的徑向漸變：

#grad {

background-image: radial-gradient(red, yellow, green);

}

徑向漸變-顏色節點不均勻分布

實例

顏色節點不均勻分布的徑向漸變：

#grad {

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

}

設置形狀

shape參數定義了形狀。它可以是值circle或ellipse。其中，circle表示圓形，ellipse表示橢圓形。默認值是ellipse。

實例

形狀為圓形的徑向漸變：

#grad {

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

}

不同尺寸大小關鍵字的使用

size參數定義了漸變的大小。它可以是以下四個值：

closest-side

farthest-side

closest-corner

farthest-corner

實例

帶有不同尺寸大小關鍵字的徑向漸變：

#grad1 {

background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);

}

#grad2 {

background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);

}

重復的徑向漸變

repeating-radial-gradient()函數用于重復徑向漸變：

實例

一個重復的徑向漸變：

#grad {

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

}

總結

以上是生活随笔為你收集整理的CSS3径向渐变的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。