So verwenden Sie das Verlaufsattribut in CSS3, um einen Hintergrundverlaufseffekt zu erstellen

Dieser Artikel wird über die Wirkung des CSS3-Hintergrundverlaufs berichten. Er hat einen gewissen Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Der Hintergrundverlauf ist gut Spezialeffekt. Wie kann ich diesen Effekt mit CSS3 erzielen? CSS3-Verläufe sind ein neuer Bildtyp, der dem Bildmodul hinzugefügt wurde. CSS3-Verläufe ermöglichen die Darstellung sanfter Übergänge zwischen zwei oder mehr angegebenen Farben.

Browser unterstützen zwei Arten von Farbverläufen:

linear, definiert mit der Funktion linear-gradient(),

radial, definiert mit radial-gradient () Funktionsdefinition.

Achten Sie bei der Verwendung auf Browserkompatibilitätsprobleme

Safari, Chrome: -webkit-linear-gradient

Firefox: -moz- linear -gradient

IE: -ms-linear-gradient

Opera: -o-linear-gradient

Dieser Artikel wird das übernehmen Chrome-Browser als Beispiel zur Erläuterung von

Linearer Farbverlauf

Um einen linearen Farbverlauf zu erstellen, legen Sie den Startpunkt und die Richtung als Winkel fest , Auch um Farbstopps zu definieren, müssen Sie mindestens zwei Stoppfarben angeben.

Linearer Verlauf von oben nach unten

div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
}

Verlaufsverlauf von links nach rechts

 div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
}

Linearer Verlauf (auch Pausen)

div{
 background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);}

Radialer Farbverlauf

A Der radiale Farbverlauf wird durch seinen Mittelpunkt definiert. Sie können auch den Mittelpunkt, die Form (Kreis oder Ellipse) und die Größe des Farbverlaufs angeben Mittelpunkt), die Form des Farbverlaufs ist eine Ellipse (stellt eine Ellipse dar) und die Größe des Farbverlaufs ist die am weitesten entfernte Ecke (stellt die am weitesten entfernte Ecke dar).

Zentrierter radialer Farbverlauf

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: center center;
background-repeat: no-repeat;
 background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
}

Benutzerdefinierter radialer Farbverlauf

nächste Seite: am nächsten, am nächsten gelegene Ecke: am nächsten gelegene Ecke

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: 80% 20%;//自己自定义位置
background-repeat: no-repeat;
 background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
}

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass dieser Artikel jedem beim Erlernen von Farbverläufen hilft.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Verlaufsattribut in CSS3, um einen Hintergrundverlaufseffekt zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!