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

十多年的茅箭網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整茅箭建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“茅箭網(wǎng)站設(shè)計(jì)”,“茅箭網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

}

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