Ejemplo de CSS repeating-radial-gradient ()

los repeating-radial-gradient()CSSLa función crea una imagen que consta de degradados repetidos que irradian desde un origen. Esto es similar a radial-gradient() y toma los mismos argumentos, pero repite el color se detiene infinitamente en todas direcciones para cubrir todo su contenedor, similar a repeating-linear-gradient() . El resultado de la función es un objeto de la tipo de datos, que es un tipo especial de .

Con cada repetición, las posiciones de las paradas de color se desplazan en un múltiplo de las dimensiones del degradado radial básico (la distancia entre la última parada de color y la primera). Por tanto, la posición de cada parada de color final coincide con una parada de color inicial; si los valores de color son diferentes, esto dará como resultado una transición visual nítida, que puede mitigarse repitiendo el primer color como el último color.

Como ocurre con cualquier gradiente, un gradiente radial repetido no tiene dimensiones intrínsecas; es decir, no tiene un tamaño natural o preferido, ni una proporción preferida. Su tamaño concreto coincidirá con el tamaño del elemento al que se aplica.

Porque s pertenecen a la tipo de datos, solo se pueden utilizar cuando s se pueden utilizar. Por esta razón, repeating-radial-gradient() no funcionará en background-color y otras propiedades que utilizan el tipo de datos.

Sintaxis

/* A gradient at the center of its container,
   starting red, changing to blue, and finishing green,
   with the colors repeating every 30px */repeating-radial-gradient(circle at center, red 0, blue, green 30px);/* An elliptical gradient near the top left of its container,
   starting red, changing to green and back again,
   repeating five times between the center and the bottom right corner,
   and only once between the center and the top left corner */repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);

Valores

La posición del gradiente, interpretada de la misma forma que background-position o transform-origin. Si no se especifica, el valor predeterminado es center.

La forma del degradado. El valor puede ser circle (lo que significa que la forma del degradado es un círculo con radio constante) o ellipse (lo que significa que la forma es una elipse alineada con el eje). Si no se especifica, el valor predeterminado es ellipse.

Una palabra clave que describe el tamaño que debe tener la forma final. Los posibles valores son:

Palabra clave	Descripción
closest-side	La forma final del degradado se encuentra con el lado del cuadro más cercano a su centro (para círculos) o con los lados vertical y horizontal más cercanos al centro (para elipses).
closest-corner	La forma final del degradado se dimensiona para que coincida exactamente con la esquina más cercana del cuadro desde su centro.
farthest-side	Similar a closest-side, excepto que el tamaño de la forma final se ajusta al lado de la caja más alejado de su centro (o lados vertical y horizontal).
farthest-corner	La forma final del degradado se dimensiona para que coincida exactamente con la esquina más alejada de la caja desde su centro.

Nota: Las primeras implementaciones de esta función incluían otras palabras clave (cover y contain) como sinónimos del estándar farthest-corner y closest-side, respectivamente. Utilice solo las palabras clave estándar, ya que algunas implementaciones ya han eliminado esas variantes más antiguas.

Una parada de color valor, seguido de una posición de parada opcional (ya sea un o un a lo largo del eje del gradiente). Un porcentaje de 0%, o una longitud de 0, representa el centro del gradiente; el valor 100% representa la intersección de la forma final con el rayo de degradado virtual. Los valores porcentuales intermedios se colocan linealmente en el rayo de gradiente virtual.

Sintaxis formal

repeating-radial-gradient(
       [[ circle  ||  ]                     [at ]? , |
        [ ellipse || [ |  ]2] [at ]? , |
        [[ circle | ellipse ] ||  ] [at ]? , |
                                                     at    ,     )
        ---------------------------------------------------------------/-----------------/
                  Contour, size and position of the ending shape          List of color stops

where  = closest-corner | closest-side | farthest-corner | farthest-side
   and  = [  [, ? ]? ]#, 
   and  =  [  ]?
   and  = [  |  ]1,2
   and  = [  |  ]

Ejemplos de

Degradado en blanco y negro

.radial-gradientbackground:repeating-radial-gradient(black, black 5px, white 5px, white 10px);

Esquina más lejana

.radial-gradientbackground:repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
      red, black 5%, blue 5%, green 10%);background:repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
      red 0 5%, green 5% 10%);

El gradiente elíptico se centrará un 20% desde la parte superior izquierda y se repetirá 10 veces entre el centro y la esquina más alejada (la esquina inferior derecha). Los navegadores que admiten paradas de color de varias posiciones mostrarán una elipse de rayas rojas y verdes. Los navegadores que aún no admitan la sintaxis verán un degradado que va de rojo a negro y luego de azul a verde.

Nota: Consulte Uso de degradados CSS para obtener más ejemplos.

Especificaciones

Compatibilidad del navegador

Ver también

• Usar degradados CSS
• Otras funciones de gradiente: radial-gradient(), linear-gradient(), repeating-linear-gradient(), conic-gradient(), repeating-conic-gradient()
• image()
• element()
• image-set()
• cross-fade()