Heim  >  Artikel  >  Web-Frontend  >  Wie viele Arten von CSS3-Verläufen gibt es?

Wie viele Arten von CSS3-Verläufen gibt es?

青灯夜游
青灯夜游Original
2022-03-15 16:13:152616Durchsuche

Es gibt zwei Arten von CSS3-Verläufen: 1. Der lineare Verlauf, der durch die Funktion linear-gradient() erstellt wird, die die Farbe entlang einer Achse ändert und einen sequentiellen Verlauf vom Startpunkt bis zur Endfarbe ausführt; 2. Der radiale Farbverlauf, erstellt durch die Funktion radial-gradient(). Farbverlauf, ein kreisförmiger Farbverlauf vom Startpunkt bis zum Endpunkt, Farbe von innen nach außen.

Wie viele Arten von CSS3-Verläufen gibt es?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Zwei Verlaufsmethoden:

  • Lineare Farbverläufe: Ändern Sie die Farbe entlang einer Achse und führen Sie einen sequentiellen Farbverlauf vom Startpunkt bis zur Endfarbe durch.

background:linear-gradient(direction,color-stop1,color-stop2,……);
  • Radiale Farbverläufe: Ein kreisförmiger Farbverlauf vom Startpunkt bis zur Endfarbe von innen nach außen.

background:radial-gradient(center,shape size,start-color,……,last-color);

Beispielcode:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #grad1
        {
            width: 200px;
            height: 200px;
            /*background-image: linear-gradient( #b7ffb5, #a880ff);*/
            /*background-image: linear-gradient(to right, #b7ffb5, #a880ff);*/
            /*background-image: linear-gradient(to bottom right, #b7ffb5, #a880ff);*/
            background-image: radial-gradient(#7af0ff, #892aff);
        }
    </style>
</head>
<body>
    <div id="grad1"></div>
</body>
</html>

Rendering:

1. Linearer Farbverlauf nach links und rechts

Wie viele Arten von CSS3-Verläufen gibt es?

Wie viele Arten von CSS3-Verläufen gibt es?4 . Path Gradient

Wie viele Arten von CSS3-Verläufen gibt es? (Lernvideo-Sharing:

CSS-Video-Tutorial

,

Web-Frontend

)Wie viele Arten von CSS3-Verläufen gibt es?

Das obige ist der detaillierte Inhalt vonWie viele Arten von CSS3-Verläufen gibt es?. 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 bedeutet CSS3-Skalierung?Nächster Artikel:Was bedeutet CSS3-Skalierung?