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