Vertiefendes Verständnis der linearen Gradienteneigenschaft in CSS

Mit der Entwicklung des Internets stellen die Menschen nicht nur hohe Anforderungen an die Funktionen von Webseiten, sondern auch immer höhere Anforderungen an das Erscheinungsbild der Seiten. Beispielsweise verwendet die Seitenfarbe keine einzige Farbe mehr. verwendet jedoch eine Vielzahl gemischter Farben, um die Seite schöner zu machen und dadurch mehr Benutzer anzulocken. In diesem Artikel erfahren Sie, wie Sie die CSS-Funktion „Linear-Gradient()“ verwenden, einschließlich der Attribute „Linear-Gradient()“, „Linear-Gradient()“-Winkel, „Linear-Gradient()“-Richtungen usw. Freunde in Not können darauf verweisen, ich hoffe, es ist für Sie nützlich.

Syntax von linear-gradient():

= linear-gradient([ [ | to ,]? ]+) > = >Die folgenden Werte werden verwendet, um die Richtung des Farbverlaufs darzustellen, die mithilfe von Winkeln oder Schlüsselwörtern festgelegt werden kann:
: Verwenden Sie Winkelwerte, um die Richtung (oder den Winkel) des Farbverlaufs anzugeben.
nach links: Stellen Sie den Farbverlauf von rechts nach links ein. Entspricht: 270 Grad

nach rechts: Stellen Sie den Farbverlauf von links nach rechts ein. Entspricht: 90 Grad

nach oben: Stellen Sie den Farbverlauf von unten nach oben ein. Entspricht: 0 Gradnach unten: Stellen Sie den Farbverlauf von oben nach unten ein. Entspricht: 180 Grad. Dies ist der Standardwert, der dem Leerlassen des Felds gleichkommt.

: wird verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben:

: gibt die Farbe an.
: Verwenden Sie den Längenwert, um die Start- und Endpositionen der Farbe anzugeben. Negative Werte sind nicht zulässig
: Verwenden Sie einen Prozentsatz, um die Start- und Endpositionen der Farbe anzugeben.


Hinweis:

Um einen linearen Farbverlauf zu erstellen, müssen Sie einen Startpunkt und eine Richtung (angegeben als Winkel) des Farbverlaufseffekts festlegen. Sie müssen auch die Endfarbe definieren. Die Stoppfarbe ist der sanfte Übergang, den Gecko erzeugen soll. Sie müssen mindestens zwei angeben. Sie können jedoch auch weitere Farben angeben, um komplexere Verlaufseffekte zu erzeugen.

Browserkompatibilität von linear-gradient()

Verwendungsbeispiele von linear-gradient()

HTML-Teil:

<div id="box"></div>

CSS-Teil:

#box{
    height: 200px;
    width: 300px;
       background: -webkit-linear-gradient(right, red , yellow); /* Safari 5.1 - 6.0 */
       background: -o-linear-gradient( right, red, yellow); /* Opera 11.1 - 12.0 */
       background: -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 - 15 */
       background: linear-gradient(to right, red , yellow); /* 标准的语法（必须放在最后） */
   }

Rendering:

Wie im Bild gezeigt, Das Beispiel ist ein linearer Farbverlauf von Rot nach Gelb, von links nach rechts. Achten Sie beim Schreiben auf Browserkompatibilitätsprobleme und grammatikalische Regeln. In diesem Artikel wird hauptsächlich der lineare Farbverlauf in CSS vorgestellt. Der Farbverlauf ist in einen linearen Farbverlauf und einen radialen Farbverlauf unterteilt. Freunde, denen es gefällt, können mir folgen!

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der linearen Gradienteneigenschaft in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!