css3 definiert die Farbverlaufssyntax als: 1. „linearer Farbverlauf (Farbverlaufsrichtung, Farbe 1, Farbe 2, ...);“, wird zum Definieren linearer Farbverläufe verwendet; 2. „radialer Farbverlauf (Kreistyp-Farbverlaufsgröße) Farbverlauf position, color 1, color 2);“ wird verwendet, um einen radialen Farbverlauf zu definieren.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Mit CSS3-Verläufen können Sie sanfte Übergänge zwischen zwei oder mehr angegebenen Farben anzeigen.
Früher musste man Bilder verwenden, um diese Effekte zu erzielen. Durch die Verwendung von CSS3-Verläufen können Sie jedoch die Downloadzeit und die Bandbreitennutzung reduzieren. Darüber hinaus sehen Elemente mit Farbverläufen beim Vergrößern besser aus, da der Farbverlauf vom Browser generiert wird.
CSS3 definiert zwei Arten von Farbverläufen:
Lineare Farbverläufe - Nach unten/oben/Links/Rechts/Diagonal
Radiale Farbverläufe (Radiale Farbverläufe) - Definiert durch ihre Zentren.
CSS3 Linearer Farbverlauf
Um einen linearen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farbknoten definieren. Der Farbknoten ist die Farbe, die einen sanften Übergang darstellen soll. Gleichzeitig können Sie auch einen Startpunkt und eine Richtung (oder einen Winkel) festlegen.
Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Linearer Verlauf – von oben nach unten (standardmäßig)
Das folgende Beispiel zeigt einen linearen Verlauf, der von oben beginnt. Beginnend bei Rot, langsamer Übergang zu Blau:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(#e66465, #9198e5);
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>Ausgabe:
CSS3 Radialer Farbverlauf
Ein radialer Farbverlauf wird durch seinen Mittelpunkt definiert.
Um einen radialen Farbverlauf zu erstellen, müssen Sie außerdem mindestens zwei Farbknoten definieren. Der Farbknoten ist die Farbe, die einen sanften Übergang anzeigen soll. Gleichzeitig können Sie auch den Mittelpunkt, die Form (Kreis oder Oval) und die Größe des Farbverlaufs festlegen. Standardmäßig ist die Mitte des Farbverlaufs „Mitte“ (d. h. am Mittelpunkt), die Form des Farbverlaufs ist eine Ellipse (d. h. eine Ellipse) und die Größe des Farbverlaufs ist „am weitesten entfernte Ecke“ (d. h. bis zur äußersten Ecke).
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Radialer Farbverlauf – Farbknoten sind gleichmäßig verteilt (standardmäßig)
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变 - 颜色结点均匀分布</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>Ausgabeergebnisse:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWas definiert CSS3 die Gradientensyntax?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
