本篇文章帶給大家的內容是詳解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（最近端）
此值使漸層的邊緣與最靠近漸層中心的元素一側相交。這是它的外觀：
closest-corner（最近的角）
此值使漸變的邊緣與最接近漸變中心位置的元素的角相接。這裡是：
farthest-side（最遠的端）
farthest-corner（最遠的角落）
此值使漸層伸展到距離漸層中心位置最遠的元素的角落：contain（包含）
此值使元素放大漸變，直到它被完全包含，而不會被元素的邊界切掉任何漸變：
cover（覆蓋）
該值將導致梯度放大，直到它覆蓋元件的整個區域：以上是詳解css3徑向漸層如何定義中心和大小形狀（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
