本篇文章為大家展示了css3徑向漸變?nèi)绾螌?shí)現(xiàn)精確定義漸變的形狀大小、添加多種終止顏色，代碼簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)是專業(yè)的祁門網(wǎng)站建設(shè)公司，祁門接單;提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行祁門網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

定義明確的形狀和大小

在之前的文章【詳解css3徑向漸變?nèi)绾味x中心和大小形狀】中我們介紹定義漸變中心、使用關(guān)鍵字定義漸變形狀與大小的方法，大家可以參考一下。但，有時(shí)我們需要更加精準(zhǔn)的定義一個(gè)徑向漸變的大小與形狀，這就需要使用長(zhǎng)度值或或百分比值來實(shí)現(xiàn)了。如下所示：

.demo {  
    /* Safari 5.1 - 6.0 */
    background-image: -webkit-radial-gradient(center center, 100px 100px, black, white); 
    
    /* 標(biāo)準(zhǔn)的語(yǔ)法 */
    background-image: radial-gradient(center center, 100px 100px, black, white);
}

效果圖：

這是定義了一個(gè)直徑為100px的正圓，我們也可以定義橢圓：

.demo {  
    /* Safari 5.1 - 6.0 */
    background-image: -webkit-radial-gradient(center center, 120px 80px, black, white); 
    
    /* 標(biāo)準(zhǔn)的語(yǔ)法 */
    background-image: radial-gradient(center center, 120px 80px, black, white);
}

效果圖：

說明：

1、無法將顯式大小值與任何大小和形狀關(guān)鍵字組合在一起；你只能使用一種方法。

2、顯式值定義了徑向形狀的水平軸和垂直軸上的長(zhǎng)度。因此，如果我們將第一個(gè)示例中的值加倍（使用200px 200px），則新漸變將如下所示：

終止顏色和顏色的放置

radial-gradient()函數(shù)中的最后幾個(gè)參數(shù)是定義從哪些顏色開始和結(jié)束漸變，以及任何中間的過渡顏色。

當(dāng)然，顏色值可以是CSS顏色中任何有效的值，我們還可以為每種顏色選擇添加的位置。

這是一個(gè)使用百分比以特定間隔放置四種顏色的示例：

.demo {  
    /* Safari 5.1 - 6.0 */
    background-image: -webkit-radial-gradient(center center, 100px 100px, red 10%, orange 40%, yellow 65%, brown 90%); 
    
    /* 標(biāo)準(zhǔn)的語(yǔ)法 */
    background-image: radial-gradient(center center, 100px 100px, red 10%, orange 40%, yellow 65%, brown 90%);
}

效果圖：

以下是有關(guān)顏色值的注意事項(xiàng)：

1、可以選擇省略任何顏色的位置，這將導(dǎo)致瀏覽器自己計(jì)算位置；

2、可以使用負(fù)值，這將導(dǎo)致顏色開始看不見，但您仍將看到結(jié)果（從一種顏色到下一種顏色的逐漸變化），具體取決于值；

3、顏色停止的位置定義每個(gè)相應(yīng)顏色處于其滿狀態(tài)的位置; 中間的一切都是逐漸發(fā)生變化（即梯度）的地方；

4、由于我們處理的是徑向漸變，因此顏色終止自然會(huì)定義嵌套橢圓的邊界和顏色。

上述內(nèi)容就是css3徑向漸變?nèi)绾螌?shí)現(xiàn)精確定義漸變的形狀大小、添加多種終止顏色，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：css3徑向漸變?nèi)绾螌?shí)現(xiàn)精確定義漸變的形狀大小、添加多種終止顏色
標(biāo)題鏈接：http://jinyejixie.com/article36/pdcpsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站維護(hù)、動(dòng)態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)