English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
gradient() Funktion-linear-gradient() erstellt ein <image>, das aus wiederholten linearen Verläufen besteht, ähnlich wie die CSS-Funktion repeating-Die Funktion gradient(), die gleiche Parameter verwendet, aber sie wiederholt den Verlauf in allen Richtungen, um den gesamten Container zu überdecken. Das Ergebnis dieser Funktion ist ein Objekt des Daten Typs <gradient>, das eine spezielle <image>-Typ ist.
Wiederholte lineare Verläufe:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlagenanleitung(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: rot; /* Angezeigt, wenn der Browser die Unterstützung nicht unterstützt */
background-image: wiederholend-linear-gradient(rot, grün 10,grün 20%);
}
#grad2 {
height: 200px;
background-color: rot; /* Angezeigt, wenn der Browser die Unterstützung nicht unterstützt */
background-image: wiederholend-linear-gradient(45deg,rot,gelb 7,grün 10%);
}
#grad3 {
height: 200px;
background-color: rot; /* Angezeigt, wenn der Browser die Unterstützung nicht unterstützt */
background-image: wiederholend-linear-gradient(190deg,rot,gelb 7,grün 10%);
}
#grad4 {
height: 200px;
background-color: rot; /* Angezeigt, wenn der Browser die Unterstützung nicht unterstützt */
background-image: wiederholend-linear-gradient(90deg,rot,gelb 7,grün 10%);
}
</style>
</head>
<body>
<h1>Wiederholte lineare Verläufe</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>Achtung:</strong> Internet Explorer 9 und frühere IE-Browser unterstützen keine linearen Verläufe.</p>
</body>
</html>Testen Sie es heraus ‹/›Funktion-linear-Die Funktion gradient() wird verwendet, um wiederholte lineare Verlaufs "Bilder" zu erstellen.
Unterstützte Version: CSS3
Die Zahlen in der Tabelle stellen die erste Browserversionsnummer dar, die diese Funktion unterstützt.
"webkit" oder "moz" oder "o" bezeichnen die Zahl als Präfix der ersten Versionsnummer der Unterstützung für diese Funktion.
| Funktion | |||||
|---|---|---|---|---|---|
| Funktion-linear-wiederholend | 26gradient() 10gradient() -moz- | 10gradient() | 16gradient() 3webkit6 -.0- | 6webkit1 5webkit1 -moz- | 12webkit1 11webkit1 -.- |
CSS Syntax-linear-background: wiederholend-oder-,farbe-stop1,farbe-stop2, ...);
| Wert | Beschreibung |
|---|---|
| Winkel | Definieren Sie die Richtung des Verlaufs des Verlaufs. Von 0deg bis 360deg, Standard ist 180deg. |
| Seite-oder-Ecke | Bestimmen Sie den Anfangspunkt des linearen Verlaufs. Er besteht aus zwei Schlüsselwörtern: Der erste gibt die horizontale Position (links oder rechts) an, der zweite gibt die vertikale Position (oben oder unten) an. Die Reihenfolge ist willkürlich, jede Klausel ist optional. |
| farbe-stop1,farbe-stop2,... | Bestimmen Sie die Anfangs- und Endfarben des Verlaufs, bestehend aus Farbwert und Stoppposition (optional, mit Prozent angegeben). |
verschiedene wiederholte lineare Verläufe:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlagenanleitung(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-image: wiederholend-linear-gradient(45deg,rot,blau 7,grün 10%);
}
#grad2 {
height: 200px;
background-image: wiederholend-linear-gradient(190deg,rot,blau 7,grün 10%);
}
#grad3 {
height: 200px;
background-image: wiederholend-linear-gradient(90deg,rot,blau 7,grün 10%);
}
</style>
</head>
<body>
<h3>wiederholter linearer Verlauf</h3>
<p>45 Grad lineare Verlauf, von Rot nach Blau:</p>
<div id="grad1></div>
<p>190 Grad lineare Verlauf, von Rot nach Blau:</p>
<div id="grad2></div>
<p>90 Grad lineare Verlauf, von Rot nach Blau:</p>
<div id="grad3></div>
<p><strong>Achtung:</strong> Internet Explorer 9 und frühere Versionen IE-Browser unterstützen Verläufe nicht.</p>
</body>
</html>Testen Sie es heraus ‹/›CSS Anleitung: CSS3 Verlauf