Heim > Artikel > Web-Frontend > So erzielen Sie einen Farbverlaufseffekt in CSS3
So erzielen Sie einen Farbverlaufseffekt in CSS3
- 王林Original
- 2020-11-16 14:36:373536Durchsuche
So erzielen Sie einen Farbverlaufseffekt in CSS3: Sie können die lineare Verlaufsfunktion und die radiale Verlaufsfunktion verwenden, um einen linearen Verlaufseffekt bzw. einen radialen Verlaufseffekt zu erzielen, z. B. [linearer Verlauf (gelb, grün)].
Es gibt zwei Arten von CSS3-Verläufen: linearer CSS3-Verlauf und radialer CSS3-Verlauf.
(Teilen von Lernvideos: css-Video-Tutorial)
1. Linearer Farbverlauf
Funktion:
linear-gradient() wird verwendet, um ein Bild zu erstellen, das einen linearen Farbverlauf aus zwei oder mehr Farben darstellt.
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Wert:
Richtung Verwenden Sie den Winkelwert, um die Richtung (oder den Winkel) des Farbverlaufs anzugeben.
color-stop1, color-stop2,... Wird verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
height: 200px;
background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
background: linear-gradient(yellow, green)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>2. Radialer Farbverlauf
Funktion;
radial-gradient()-Funktion erstellt „Bild“ mit radialem Farbverlauf.
Radiale Steigungen werden durch den Mittelpunkt definiert.
Um einen radialen Farbverlauf zu erstellen, müssen Sie zwei Stoppfarben festlegen.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Wert:
1. Form Bestimmen Sie die Art des Kreises.
Ellipse (Standard): Geben Sie den radialen Verlauf der Ellipse an.
circle: Geben Sie den radialen Verlauf des Kreises an.
2, Größe Definieren Sie die Größe des Verlaufs, mögliche Werte:
farthest-corner (Standard): Geben Sie die Radiuslänge des radialen Verlaufs von an der Mittelpunkt des Kreises bis Der am weitesten vom Mittelpunkt des Kreises entfernteste Winkel
Nächste Seite: Geben Sie die Radiuslänge des radialen Farbverlaufs vom Mittelpunkt des Kreises bis zur Seite an, die dem Mittelpunkt des Kreises am nächsten liegt
-
Nächste Ecke: Geben Sie die Radiuslänge des radialen Farbverlaufs vom Mittelpunkt des Kreises bis zur Seite an, die dem Mittelpunkt des Kreises am nächsten liegt. Der nächstgelegene Winkel zum Mittelpunkt des Kreises.
Am weitesten entfernte Seite: Geben Sie die Radiuslänge an des radialen Gradienten vom Mittelpunkt des Kreises zur Seite, die am weitesten vom Mittelpunkt des Kreises entfernt ist
3. Position definiert die Position des Gradienten. Mögliche Werte:
center (Standard): Legen Sie den Ordinatenwert des Mittelpunkts des radialen Verlaufskreises in der Mitte fest.
oben: Legen Sie die Oberseite als Ordinatenwert der Mitte des radialen Verlaufskreises fest.
unten: Stellen Sie den Boden auf den Ordinatenwert der Mitte des radialen Farbverlaufskreises ein.
4. start-color, ..., last-color wird verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
height: 150px;
width: 200px;
background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
background: radial-gradient(orange, yellow, pink); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>Verwandte Empfehlungen: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Farbverlaufseffekt in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!