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

這篇文章帶給大家的內容是css3徑向漸層詳解精確定義漸層的形狀大小、增加多種終止顏色。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

定義明確的形狀和大小

#在先前的文章【詳解css3徑向漸層如何定義中心和大小形狀】中我們介紹定義漸變中心、使用關鍵字定義漸層形狀與大小的方法，大家可以參考一下。但，有時我們需要更精準的定義一個徑向漸層的大小與形狀，這就需要使用長度值或或百分比值來實現了。如下圖：

.demo {  
    /* Safari 5.1 - 6.0 */
    background-image: -webkit-radial-gradient(center center, 100px 100px, black, white); 
    
    /* 标准的语法 */
    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); 
    
    /* 标准的语法 */
    background-image: radial-gradient(center center, 120px 80px, black, white);
}

效果圖：

說明：

1、無法將明確大小值與任何大小和形狀關鍵字組合在一起；你只能使用一種方法。

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

##終止顏色和顏色的放置

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

當然，顏色值可以是CSS顏色中任何有效的值，我們也可以為每種顏色選擇新增的位置。

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

.demo {  
    /* Safari 5.1 - 6.0 */
    background-image: -webkit-radial-gradient(center center, 100px 100px, red 10%, orange 40%, yellow 65%, brown 90%); 
    
    /* 标准的语法 */
    background-image: radial-gradient(center center, 100px 100px, red 10%, orange 40%, yellow 65%, brown 90%);
}

效果圖：

以下是有關顏色值的注意事項：

1、可以選擇省略任何顏色的位置，這將導致瀏覽器自行計算位置；

2、可以使用負值，這將導致顏色開始看不見，但您仍將看到結果（從一種顏色到下一種顏色的逐漸變化），具體取決於值；

3、顏色停止的位置定義每個相應顏色處於其滿狀態的位置; 中間的一切都是逐漸發生變化（即梯度）的地方；

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

以上是css3徑向漸層詳解精確定義漸變的形狀大小、增加多種終止顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！