Verwenden Sie CSS3, um die Hintergrundverlaufsmethode zu implementieren

Bevor ich nicht verstand, dass CSS auch zum Erstellen von Hintergrundverläufen verwendet werden kann, habe ich immer PS verwendet, um Hintergrundverlaufsbilder auf die von mir erstellten Webseiten anzuwenden. Vor nicht allzu langer Zeit habe ich jedoch erfahren, dass CSS3 auch Hintergrundverläufe erstellen kann, und es ist viel einfacher geworden, Hintergrundverläufe zu erstellen. Hier sind einige Methoden zum Erstellen von Hintergrundverläufen in CSS3.

1. Linearer Gradient

//自上而下的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(top, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(top, blue, red);/* Firefox*/
background:-o-linear-gradient(top, blue, red);/* Opera, Opera mobile*/
}

//从左往右的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(left, blue, red);/* Firefox*/
background:-o-linear-gradient(left, blue, red);/* Opera, Opera mobile*/
}

Der erste Parameter ist die Startrichtung des Gradienten, der nicht unbedingt die Endrichtung des Gradienten folgen muss Der Verlauf des Farbverlaufs kann von oben nach unten oder von links nach rechts erfolgen.

Der zweite Parameter ist die Farbe, bei der der Farbverlauf beginnt.

Der dritte Parameter ist die Farbe am Ende der Farbverlauf.

2. Addieren Sie den linearen Gradienten der Funktion stop()

p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
 #1a82f7 85%, red);/* Safari, Chrome*/

background:-moz-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Firefox*/

background:-o-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Opera, Opera mobile*/
}

Der obige Code bedeutet: von 15 % nach links bis 50 % und dann bis Bei 85 %, schließlich nach rechts, verläuft die Farbverlaufssequenz von Blau zu #1a82f7, #2F2727, #1a82f7 und dann zu Rot.

3. Radialer Farbverlauf (von der Mitte des Kreises zur Außenseite des Kreises)

p{
width:200px;
height:200px;
padding:5px;
border:1px solid #ccc;
background:-webkit-radial-gradient(circle, blue, red);/* Safari, Chrome*/
background:-moz-radial-gradient(circle, blue, red);/* Firefox*/
}

Die Bedeutung des obigen Codes ist: eine Farbe von blau bis rot, vom Mittelpunkt des Kreises bis zum radialen Gradienten der peripheren Diffusion.

Wenn der Parameter Kreis in Ellipse geändert wird, handelt es sich um einen elliptischen radialen Farbverlauf.

4. Hintergrundverlauf für den IE-Browser

Der IE-Browser kann nur den IE-eigenen Filter verwenden, um einen Verlauf zu erzielen.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

Der erste Parameter: die Farbe der Startposition des Farbverlaufs

Der zweite Parameter: die Farbe der Endposition des Farbverlaufs; Dritter Parameter: Typ des Farbverlaufs, 0 steht für den vertikalen Farbverlauf und 1 für den horizontalen Farbverlauf.

Hinweis: Die Hintergrundverlaufseinstellung des IE-Browsers muss nicht auf den Hintergrund eingestellt werden, sondern verwenden Sie einfach den Filter direkt.

Obwohl die Hintergrundverlaufsfunktion von CSS3 leistungsstark ist, gibt es auch Probleme mit der Browserkompatibilität. Die aktuelle spezifische Unterstützung für das CSS3-Hintergrundverlaufsattribut ist: IE10, FireFox3.6+, Safari4.0+, Chrome, Opera11.1 (radialer Verlauf wird noch nicht unterstützt)+, IOS 3.2+, Opera Mobile11.1, Android. Daher müssen wir bei der Verwendung von CSS3 zum Erstellen von Hintergrundverläufen auf die Browserkompatibilität achten.

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um die Hintergrundverlaufsmethode zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!