Heim >Web-Frontend >CSS-Tutorial >So legen Sie die Verlaufsfarbe in CSS fest

So legen Sie die Verlaufsfarbe in CSS fest

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-13 11:49:5266337Durchsuche

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) )".

So legen Sie die Verlaufsfarbe in CSS fest

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:

So legen Sie die Verlaufsfarbe in CSS fest

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!

Stellungnahme:
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
Vorheriger Artikel:Was ist ein CSS-Präprozessor?Nächster Artikel:Was ist ein CSS-Präprozessor?