CSS | función gradiente-radial()

La función radial-gradient() es una función incorporada en CSS que se utiliza para establecer un degradado radial como imagen de fondo. Comienza en un solo punto y emana hacia afuera. De forma predeterminada, el primer color comienza en la posición central del elemento y luego se desvanece hasta el color final hacia el borde del elemento. El desvanecimiento ocurre a la misma velocidad hasta que se especifica.
Sintaxis: 
 

background-image: 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 radial-gradient() en CSS:
Programa 1: 
 

html

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

Producción: 
 

Programa 2: 
 

html

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

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 *