Heim > Artikel > Web-Frontend > So legen Sie die Verlaufsfarbe in CSS fest
So legen Sie die Verlaufsfarbe in CSS fest
- 醉折花枝作酒筹Original
- 2021-04-13 11:49:5266297Durchsuche
Methode: 1. Verwenden Sie linear-gradient, um einen linearen Farbverlauf festzulegen. Die Syntax lautet „linear-gradient(angle, color, color)“. 2. Verwenden Sie radial-gradient, um einen radialen Farbverlauf festzulegen. Die Syntax lautet „radial-gradient“. Farbverlauf(Position, Farbe, Farbe) )".
Die Betriebsumgebung dieses Tutorials: Windows7-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.
CSS3 definiert zwei Arten von Farbverläufen:
Lineare Farbverläufe – nach unten/oben/links/rechts/diagonal
Radiale Farbverläufe – definiert durch ihre Mittelpunkte
Um einen linearen Farbverlauf zu erstellen, müssen Sie Folgendes tun Definieren Sie mindestens zwei Farbknoten. Farbknoten sind die Farben, die einen sanften Übergang darstellen sollen. Gleichzeitig können Sie auch einen Startpunkt und eine Richtung (oder einen Winkel) festlegen.
Beispiel für die CSS-Einstellung eines linearen Farbverlaufs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>Rendering:
Empfohlenes Lernen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo legen Sie die Verlaufsfarbe in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!