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徑向漸變如何實現精確定義漸變的形狀大小、添加多種終止顏色，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。