CSS | función de repetición de gradiente radial()

La función repeating-radial-gradient() es una función incorporada en CSS que se utiliza para repetir degradados radiales.
Sintaxis: 
 

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

Parámetros: esta función acepta muchos parámetros que se enumeran a continuación: 
 

  • forma: este parámetro se utiliza para definir la forma del degradado. Tiene dos posibles valores círculo o elipse. El valor de forma predeterminado es elipse.
  • tamaño: este parámetro se utiliza para definir el tamaño del degradado. Los valores posibles son: esquina más lejana (predeterminado), lado más cercano, esquina más cercana, lado más lejano.
  • position: este parámetro se utiliza para definir la posición del degradado. El valor predeterminado es el centro.
  • start-color, …, last-color: este parámetro se utiliza para mantener el valor del color seguido de su posición de parada opcional.

El siguiente ejemplo ilustra la función repeating-radial-gradient() en CSS:
Ejemplo: 
 

html

<!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>                    

Producción: 
 

Ejemplo 2: 
 

html

<!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>                    

Producción: 
 

Navegador compatible:

  • Google cromo 26
  • Borde 12
  • explorador de Internet 10
  • Firefox 16
  • Ópera 12.1
  • Safari 7

Publicación traducida automáticamente

Artículo escrito por Mahadev99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *