本文小編為大家詳細(xì)介紹“css3漸變方式有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css3漸變方式有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)高唐免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

css3漸變有2種：1、linear-gradient()函數(shù)創(chuàng)建的線性漸變，沿著一根軸線改變顏色，從起點(diǎn)到終點(diǎn)顏色進(jìn)行順序漸變；2、radial-gradient()函數(shù)創(chuàng)建的徑向漸變，從起點(diǎn)到終點(diǎn)顏色從內(nèi)而外沿進(jìn)行圓形漸變。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

兩種漸變方式：

• 線性漸變（Linear Gradients）：沿著一根軸線改變顏色，從起點(diǎn)到終點(diǎn)顏色進(jìn)行順序漸變。

background:linear-gradient(direction,color-stop1,color-stop2,……);

• 徑向漸變（Radial Gradients）：從起點(diǎn)到終點(diǎn)顏色從內(nèi)而外沿進(jìn)行圓形漸變。

background:radial-gradient(center,shape size,start-color,……,last-color);

示例代碼：