manuel de référence CSS

CSS @règles (RULES)

大全 des attributs CSS

CSS repeating-radial-gradient() function

La fonction CSS repeating-radial-gradient() crée un <image> composé de gradients répétés partant du point d'origine. Il est similaire à radial-gradient et utilisant les mêmes paramètres, mais il répètera les couleurs dans toutes les directions pour couvrir tout le conteneur. Le résultat de la fonction est un objet de type <gradient>, qui est un type spécial de <image>.

Fonction CSS

Online Example

Repeating linear gradient:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Base Tutorial(oldtoolbag.com)</title>　
<style>
#grad1　{
　　height:　200px;
　　background-image: repeating-radial-gradient(rouge, jaune　10, vert　15%);
}
</style>
</head>
<body>
<h3>Dégradé radial répété</h3>
<div id="grad1></div>
<p><strong>Attention : </strong> Internet Explorer　9　Les versions avant et égales à cette version ne prennent pas en charge les dégradés.</p>
</body>
</html>

Voyons tester ‹/›

Définition et utilisation

repeating-radial-La fonction gradient() crée un dégradé radial "image" répété.

Version prise en charge : CSS3

Compatibilité du navigateur

Les nombres dans le tableau représentent le numéro de version du premier navigateur pris en charge pour cette fonction.

"webkit" ou "moz" ou "o" indique le numéro de version du premier prefixe pris en charge pour cette fonction.

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

Syntaxe CSS

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

Valeur	Description
shape	Définir la forme du dégradé. Cela peut être : ellipse (par défaut) : spécifiez un dégradé radial elliptique circle : spécifiez un dégradé radial circulaire
size	Emplacement spécifique de la contour des bords. Cela peut être l'une des valeurs suivantes : farthest-corner (par défaut) : spécifiez la longueur du rayon du dégradé radial de la position du centre à l'angle le plus éloigné du centre. closest-side : spécifiez la longueur du rayon du dégradé radial de la position du centre à la bordure la plus proche du centre. closest-corner : spécifiez la longueur du rayon du dégradé radial de la position du centre à l'angle le plus proche du centre. farthest-side : comme closest-side : inversement, spécifiez la longueur du rayon du dégradé radial de la position du centre à la bordure la plus éloignée du centre.
position	Position du centre, similaire à on et background-position ou transform-origin. Par défaut, "center"
start-color, ..., last-color	Pour spécifier les couleurs de début et de fin du dégradé, vous pouvez utiliser des valeurs de longueur ou des pourcentages pour spécifier la position des couleurs de début et de fin, mais les valeurs négatives ne sont pas autorisées.

Tutoriel CSS : CSS3 Dégradé

Fonction CSS

Règle @charset CSS Fonctions CSS