CSS radial-gradient()用法及代碼示例

radial-gradient()函數是CSS中的內置函數，用於將徑向漸變設置為背景圖像。它從一個點開始並向外散發。默認情況下，第一種顏色從元素的中心位置開始，然後向著元素的邊逐漸淡出為最終顏色。直到指定為止，淡入淡出的發生率均相等。

用法:

background-image:radial-gradient( shape size at position, start-color, ..., last-color );

參數：此函數接受以下列出的許多參數：

shape:此參數用於定義漸變的形狀。它有兩個可能的值圓形或橢圓形。默認形狀值為橢圓。
size:此參數用於定義漸變的大小。可能的值為：farthest-corner(默認值)，closest-side，closest-corner，farthest-side。
position:此參數用於定義漸變的位置。默認值為center。
start-color，…，last-color：此參數用於保留顏色值及其後的可選停止位置。

以下示例說明了CSS中的radial-gradient()函數：

程序1:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>CSS Gradients</title>  
        <style>  
            #main {  
                height:250px;  
                width:600px;  
                background-color:white;  
                background-image:radial-gradient(#090, #fff, #2a4f32);  
            }  
            .gfg {  
                text-align:center;  
                font-size:40px;  
                font-weight:bold;  
                padding-top:80px;  
            }  
            .geeks {  
                font-size:17px;  
                text-align:center;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="main">  
            <div class = "gfg">GeeksforGeeks</div>  
            <div class = "geeks">A computer science portal for geeks</div>  
        </div>  
    </body>  
</html>

輸出：

程序2:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>CSS Gradients</title>  
        <style>  
            #main {  
                height:400px;  
                width:600px;  
                background-color:white;  
                background-image:radial-gradient(circle, green, white, blue);  
            }  
            .gfg {  
                text-align:center;  
                font-size:40px;  
                font-weight:bold;  
                padding-top:155px;  
            }  
            .geeks {  
                font-size:17px;  
                text-align:center;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="main">  
            <div class = "gfg">GeeksforGeeks</div>  
            <div class = "geeks">A computer science portal for geeks</div>  
        </div>  
    </body>  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自Mahadev99大神的英文原創作品 CSS | radial-gradient() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。