詳解css3徑向漸層如何定義中心和大小形狀（程式碼範例）

本篇文章帶給大家的內容是詳解css3徑向漸層如何定義中心和大小形狀（程式碼範例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

為了讓徑向漸層--radial-gradient()在所有支援的瀏覽器中都能正常運作，並讓一些新增功能可以涵蓋任何未來的支援。我們可以這樣寫：

.demo {
	/* 不支持浏览器的后备 */ 
	background: #000000;
	
	/* 旧的WebKit语法 */ 
	background-image: -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));
	
	/* 新的WebKit语法 */ 
	background-image: -webkit-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	background-image: -moz-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	/* IE10 + */ 
	background-image: -ms-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	/* Opera (13?) */
	background-image: -o-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
        
    /* 标准写法*/
    background-image: radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
}

下面我們以標準寫法，來一步步來分析徑向漸變的語法：

.demo {  
    background-image: radial-gradient(center center, circle cover, black, blue, green, red, purple, white);  
}

定義漸變中心

傳遞給徑向漸變函數的第一個參數（是的，radial-gradient()是一個函數--這也是它有圓括號的原因）定義了漸變完成時創建的橢圓中心的位置。我們在上面的例子中使用了“center center”一對值。

「radial」 一詞表示 「從中心向外沿著半徑...」。所以第一個參數定義了外向動作的起始位置。

#基本上，這個參數可以接受你放在background-position屬性中的任何值。漸層中心位置的預設值或初始值為center center。

定義形狀和大小

函數中的第二個參數定義了漸層的形狀和大小。

第二個參數的第一部分可以是circle或ellipse（即：圓或橢圓）。差異基本上就在於橢圓不是一個完美的圓；因此，根據漸變的大小和中心位置，該ellipse值可以使漸變呈橢圓形；但是circle值意味著漸變總是一個完美的圓。

第二個參數的第二部分（定義大小）可以取六個值（關鍵字）中的一個。分別可以是：

1、closest-side（最近端）

#2、closest-corner（最近的角落）

3、farthest-side（最遠的端）

4、farthest-corner（最遠的角落）

#5、contain（包含）

##6、cover（覆蓋）

乍一看，這些值可能有點難以掌握，所以讓我們透過範例來一一打破，理解它們。讓我們使用一個基本的黑到白漸變，以便我們可以說明每個值的作用。這是程式碼：

.demo {
  background-image: radial-gradient(50px 50px, circle closest-side, black, white);
}

所有其他值將保持不變，但我們將更改大小值（目前顯示為closest-side），以便大家可以看到每個值對漸變外觀的影響。

請注意，我已將中心位置設定50px 50px為有助於使形狀和大小值更清晰。

closest-side（最近端）

此值使漸層的邊緣與最靠近漸層中心的元素一側相交。這是它的外觀：

closest-corner（最近的角）

此值使漸變的邊緣與最接近漸變中心位置的元素的角相接。這裡是：

請注意，漸層的整個形狀的一部分被切掉了。這是因為它被推入元素的角落，使其邊緣與元素的角落相交。

farthest-side（最遠的端）

這一個與第一個值相反，導致漸變的邊緣與距離漸層中心最遠的元素一側相遇：

請注意，此範例中漸變的大小與其他兩個值不同，因為漸層被強制拉伸以觸摸元素的最遠邊緣。

farthest-corner（最遠的角落）

此值使漸層伸展到距離漸層中心位置最遠的元素的角落：

現在，漸層覆蓋了更多的元素。

contain（包含）

此值使元素放大漸變，直到它被完全包含，而不會被元素的邊界切掉任何漸變：

看起來很熟悉？嗯，它應該，因為這個值相當於closest-side，如上所述。

cover（覆蓋）

該值將導致梯度放大，直到它覆蓋元件的整個區域：

這個值是不是也看起來很熟悉，因為這個值相當於farthest-corner。

註：使用關鍵字定義大小是無法精確的定義一個進步圓的尺寸的。

總結：以上就是這篇文章所介紹的全部內容，希望能對大家的學習有所幫助。

以上是詳解css3徑向漸層如何定義中心和大小形狀（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！