css3徑向漸變詳解之精確定義漸變的形狀大小、添加多種終止顏色

定義明確的形狀和大小

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

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

效果圖：

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

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

效果圖：

說明：

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

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

終止顏色和顏色的放置

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

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

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

.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)的語法 */
 background-image: radial-gradient(center center, 100px 100px, red 10%, orange 40%, yellow 65%, brown 90%);
}

效果圖：

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

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

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

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com