manual de referencia de CSS

CSS @reglas (RULES)

大全 de propiedades CSS

Regla @charset CSS Funciones CSS (Functions)

tamaño de CSS repeating-radial-función gradient() CSS

función CSS repeating-radial-gradient() crea un <image> compuesto por un gradiente repetido que se expande desde el punto de origen. Es similar a radial-gradient() y usa los mismos parámetros, pero repetirá los colores en todas las direcciones para cubrir todo el contenedor. El resultado de la función es un objeto de tipo <gradient>, que es un tipo especial de <image>.

Función CSS

Ejemplo en línea

Gradiente lineal repetido:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title> Tutoriales básicos(oldtoolbag.com)</title>　
<style>
#grad1　{
　　height:　200px;
　　background-image: repeating-radial-gradient(rojo, verde　10, verde　15%);
}
</style>
</head>
<body>
<h3>Gradiente radial repetido</h3>
<div id="grad1></div>
<p><strong>Nota:</strong>Internet Explorer　9　No se admite el gradiente en versiones anteriores a la </p>
</body>
</html>

Prueba y mira ‹/›

Definición y uso

repeating-radial-La función gradient() se utiliza para crear un gradiente radial "imagen" repetido.

Versión de soporte: CSS3

Compatibilidad del navegador

Los números en la tabla representan la primera versión del navegador que admite esta función.

"webkit" o "moz" o "o" el número especificado es el prefijo de la primera versión del navegador que admite esta función.

función
repeating-radial-gradient()	26.0 10.0　-webkit-	10.0	16.0 3.6　-moz-	6.1 5.1　-webkit-	12.1 11.1　-o-

Sintaxis CSS

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

Valor	Descripción
shape	Definir la forma del gradiente. Puede ser: ellipse (por defecto): especifica un gradiente radial elíptico circle: especifica un gradiente radial circular
size	La posición específica del contorno del borde. Puede ser uno de los siguientes valores: farthest-corner (por defecto): especifica la longitud del radio del gradiente radial desde el centro hasta el ángulo más lejano al centro. closest-side: especifica la longitud del radio del gradiente radial desde el centro hasta el borde más cercano al centro. closest-corner: especifica la longitud del radio del gradiente radial desde el centro hasta el ángulo más cercano al centro. farthest-side: igual que closest-side: por el contrario, especifica la longitud del radio del gradiente radial desde el centro hasta el borde más lejano del centro.
position	Posición del centro, similar a on y background-position o transform-origin. Por defecto es "center"
start-color, ..., last-color	Para especificar los colores de inicio y final del gradiente, se puede usar valores de longitud o porcentajes para especificar la posición de los colores de inicio y final, pero no se permite el uso de valores negativos.

Tutorial CSS: CSS3 Gradiente

Función CSS

Regla @charset CSS Funciones CSS (Functions)