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

repeating-radial-gradient()函数是CSS中的内置函数，用于重复径向渐变。

用法:

background-image:repeating-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中的repeating-radial-gradient()函数：

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>CSS Gradients</title>  
        <style>  
            #main {  
                height:250px;  
                width:600px;  
                background-color:white;  
                background-image:repeating-radial-gradient(blue,  
                white 10%, green 15%) 
            }  
            .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:400px;  
                background-color:white;  
                background-image:repeating-radial-gradient(circle,  
                blue, white 10%, green 15%) 
            }  
            .gfg {  
                text-align:center;  
                font-size:40px;  
                font-weight:bold;  
                padding-top:170px;  
            }  
            .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 | repeating-radial-gradient() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。