English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
fonction repeating-linear-gradient() crée une <image> composée de dégradés linéaires répétés, similaire à la fonction repeating de CSS linear-La fonction gradient(), utilisant les mêmes paramètres, répète le dégradé dans toutes les directions pour couvrir tout le conteneur. Le résultat de cette fonction est un objet de type <gradient>, qui est un type spécial de <image>.
Dégradé linéaire répété :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutoriel de base (oldtoolbag.com)</title>/title>
<style>
#grad1 {
height: 200px;
background-color: rouge; /* Affiché lorsque le navigateur ne prend pas en charge. */
background-image: répétant-linear-gradient(rouge, vert 10,vert 20%);
}
#grad2 {
height: 200px;
background-color: rouge; /* Affiché lorsque le navigateur ne prend pas en charge. */
background-image: répétant-linear-gradient(45deg,rouge,j黄色 7,green 10%);
}
#grad3 {
height: 200px;
background-color: rouge; /* Affiché lorsque le navigateur ne prend pas en charge. */
background-image: répétant-linear-gradient(190deg,rouge,j黄色 7,green 10%);
}
#grad4 {
height: 200px;
background-color: rouge; /* Affiché lorsque le navigateur ne prend pas en charge. */
background-image: répétant-linear-gradient(90deg,rouge,j黄色 7,green 10%);
}
</style>
</head>
<body>
<h1>Dégradé linéaire répété</h1>
<div id="grad1></div>
<p>45deg:</p>
<div id="grad2></div>
<p>190deg:</p>
<div id="grad3></div>
<p>90deg:</p>
<div id="grad4></div>
<p><strong>Attention :</strong> Internet Explorer 9 Les navigateurs IE versions antérieures à et incluant celles-ci ne prennent pas en charge les dégradés linéaires.</p>
</body>
</html>Testez et voyez ‹/›fonction-linear-La fonction gradient() est utilisée pour créer une "image" de dégradé linéaire répété.
Version prise en charge : CSS3
Les nombres dans le tableau représentent le premier numéro de version du navigateur pris en charge par la fonction.
"webkit" ou "moz" ou "o" désignent le préfixe de version du premier numéro de version pris en charge de la fonction.
| fonction | |||||
|---|---|---|---|---|---|
| fonction-linear-répétant | 26gradient() 10gradient() -moz- | 10gradient() | 16gradient() 3webkit6 -.0- | 6webkit1 5webkit1 -moz- | 12webkit1 11webkit1 -.- |
CSS syntaxe-linear-background: répétant(angle | à côté-ou-coin, couleur-stop1, couleur-stop2, ...);
| Valeur | Description |
|---|---|
| angle | Définir la direction de l'angle du dégradé. De 0deg à 360deg，par défaut 180deg。 |
| côté-ou-coin | Définir la position de départ du dégradé linéaire. Composé de deux mots-clés : le premier indique la position horizontale (gauche ou droite), le second indique la position verticale (haut ou bas). L'ordre est arbitraire, chaque mot-clé est optionnel. |
| couleur-stop1, couleur-stop2,... | Définir les couleurs de début et de fin du dégradé, composées de valeurs de couleur, de positions d'arrêt (optionnelles, spécifiées en pourcentage). |
Différents dégradés linéaires répétés :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutoriel de base (oldtoolbag.com)</title>/title>
<style>
#grad1 {
height: 200px;
background-image: répétant-linear-gradient(45deg,red,blue 7,green 10%);
}
#grad2 {
height: 200px;
background-image: répétant-linear-gradient(190deg,red,blue 7,green 10%);
}
#grad3 {
height: 200px;
background-image: répétant-linear-gradient(90deg,red,blue 7,green 10%);
}
</style>
</head>
<body>
<h3>Dégradé linéaire répété</h3>
<p>45 degrés dégradé linéaire, du rouge au bleu : </p>
<div id="grad1></div>
<p>190 degrés dégradé linéaire, du rouge au bleu : </p>
<div id="grad2></div>
<p>90 degrés dégradé linéaire, du rouge au bleu : </p>
<div id="grad3></div>
<p><strong>Attention : </strong> Internet Explorer 9 et versions antérieures IE ne prennent pas en charge le dégradé.</p>
</body>
</html>Testez et voyez ‹/›Tutoriel CSS : CSS3 Dégradé