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

來源：懂視網責編：小采時間：2020-11-02 22:12:33

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

css3徑向漸變詳解之精確定義漸變的形狀大小、添加多種終止顏色:本篇文章給大家帶來的內容是css3徑向漸變詳解之精確定義漸變的形狀大小、添加多種終止顏色。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。定義明確的形狀和大小在之前的文章【詳解css3徑向漸變如何定義中心和大小形狀】中我們介紹定義漸

推薦度：

點擊下載本文 文檔為doc格式

導讀css3徑向漸變詳解之精確定義漸變的形狀大小、添加多種終止顏色:本篇文章給大家帶來的內容是css3徑向漸變詳解之精確定義漸變的形狀大小、添加多種終止顏色。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。定義明確的形狀和大小在之前的文章【詳解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%);
}

效果圖：