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

CSS3徑向漸變

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

為了創(chuàng)建一個(gè)徑向漸變，你也必須至少定義兩種顏色節(jié)點(diǎn)。顏色節(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時(shí)，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認(rèn)情況下，漸變的中心是center（表示在中心點(diǎn)），漸變的形狀是ellipse（表示橢圓形），漸變的大小是farthest-corner（表示到最遠(yuǎn)的角落）。

語法

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

徑向漸變-顏色節(jié)點(diǎn)均勻分布（默認(rèn)情況下）

實(shí)例

顏色節(jié)點(diǎn)均勻分布的徑向漸變：

#grad {

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

}

徑向漸變-顏色節(jié)點(diǎn)不均勻分布

實(shí)例

顏色節(jié)點(diǎn)不均勻分布的徑向漸變：

#grad {

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

}

設(shè)置形狀

shape參數(shù)定義了形狀。它可以是值circle或ellipse。其中，circle表示圓形，ellipse表示橢圓形。默認(rèn)值是ellipse。

實(shí)例

形狀為圓形的徑向漸變：

#grad {

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

}

不同尺寸大小關(guān)鍵字的使用

size參數(shù)定義了漸變的大小。它可以是以下四個(gè)值：

closest-side

farthest-side

closest-corner

farthest-corner

實(shí)例

帶有不同尺寸大小關(guān)鍵字的徑向漸變：

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

}

重復(fù)的徑向漸變

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

實(shí)例

一個(gè)重復(fù)的徑向漸變：

#grad {

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

}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。