Methode: 1. Verwenden Sie linear-gradient(), um einen linearen Farbverlauf zu implementieren. Die Syntax lautet „linear-gradient(Winkel, Start- und Endfarbliste)“. 2. Verwenden Sie radial-gradient(), um einen radialen Farbverlauf zu implementieren ist „radiale Farbverlaufsposition (Größe, Start- und Endfarben)“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
linear-gradient()-Funktion - linearer Farbverlauf
Die linear-gradient()-Funktion wird verwendet, um ein „Bild“ eines linearen Farbverlaufs zu erstellen.
Um einen linearen Farbverlauf zu erstellen, müssen Sie zwei Farben angeben. Sie können auch Farbverlaufseffekte in verschiedenen Richtungen erzielen (angegeben als Winkel). Wenn die Richtung nicht angegeben ist, erfolgt der Farbverlauf standardmäßig von oben nach unten.
radial-gradient() function--radial-gradient( ) Funktion erstellt eine „Bild“ mit einem radialen Farbverlauf. Radiale Steigungen werden durch den Mittelpunkt definiert. Beispiel:
Um einen radialen Farbverlauf zu erstellen, müssen Sie zwei Stoppfarben festlegen.
CSS-Radialfarbverläufe (Radialverläufe) unterscheiden sich von linearen Verläufen (lineare Verläufe). Sie verlaufen nicht entlang einer Richtung, sondern nehmen einen Punkt als Mittelpunkt und strahlen Verläufe um 360 Grad ab. R-Grammatik: re
radial-gradient(shape size at position, start-color, ..., last-color);
Nach dem Login kopieren
Parameterwert:
Wert
Beschreibung
Form
Der Kreistyp bestimmt den Kreis:
Ellipse (Standard): Geben Sie den ovalen radialen Verlauf an.
circle: Geben Sie den radialen Verlauf des Kreises an.
size Definieren Sie die Größe des Verlaufs, mögliche Werte: farthest-corner (Standard): Geben Sie die Radiuslänge des radialen Verlaufs vom Mittelpunkt an des Kreises zum Mittelpunkt des Kreises Die am weitesten entfernte Ecke
closest-side: Geben Sie die Radiuslänge des radialen Farbverlaufs vom Mittelpunkt des Kreises zur Seite an, die dem Mittelpunkt am nächsten liegt.
closest-corner: Geben Sie die Radiuslänge von an der radiale Verlauf vom Mittelpunkt des Kreises zur Ecke, die dem Mittelpunkt am nächsten liegt
am weitesten entfernte Seite: Geben Sie die Radiuslänge des radialen Verlaufs an, um die Position des Verlaufs vom Mittelpunkt des Kreises zur Seite zu definieren, die am weitesten vom Mittelpunkt entfernt ist . Mögliche Werte:
center
(Standard): Legen Sie den mittleren Ordinatenwert der Mitte des radialen Verlaufskreises fest.
top
: Legen Sie die Oberseite als Ordinatenwert der Mitte des radialen Verlaufskreises fest.
unten
: Stellen Sie den Boden auf den Ordinatenwert der Mitte des radialen Verlaufskreises ein.
start-color, ..., last-color
wird verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
<style>
.demo{
width:500 ;
height: 300;
margin: 50px auto;
}
.demo *{
width: 200px;
height: 200px;
margin: 20px;
text-align: center;
line-height: 200px;
color: #fff;
font-size: 16px;
float: left;
}
.demo1{
background-image: -moz-radial-gradient(#ecff05, red);
/* old */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red));
/* new syntax */
background-image: -webkit-radial-gradient(#ecff05, red);
background-image: radial-gradient(#ecff05, red);
}
.demo2{
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);
background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1">径向渐变</div>
<div class="demo2">径向渐变</div>
</div>
</body>
</html>
Nach dem Login kopieren
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo legen Sie den Farbverlauf in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
CSS-Radialfarbverläufe (Radialverläufe) unterscheiden sich von linearen Verläufen (lineare Verläufe). Sie verlaufen nicht entlang einer Richtung, sondern nehmen einen Punkt als Mittelpunkt und strahlen Verläufe um 360 Grad ab. R-Grammatik: re
