CSS3徑向漸變的方法

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

    CSS3徑向漸變

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

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

    語(yǔ)法

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

}

以上就是關(guān)于“CSS3徑向漸變的方法”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。