Wie kann ich browserübergreifende lineare Farbverläufe implementieren?

Implementieren linearer Verläufe in verschiedenen Browsern

Browserübergreifende Kompatibilität

Problem: Erzielen Sie browserübergreifende Kompatibilität für einen linearen Farbverlauf wie folgt angegeben:

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);

Opera- und IE-Alternativen:

background-image:     -ms-linear-gradient(right, #0c93C0, #FFF);  
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);

Vertikale vs. horizontale Farbverläufe

Um die Farbverläufe zu ändern horizontal statt vertikal, verwenden Sie die folgenden Werte für die Start- und Endpunkte:

top left
top right

Zum Beispiel:

background-image: -webkit-linear-gradient(top, #0C93C0, #FFF);
background-image:    -moz-linear-gradient(top, #0C93C0, #FFF);
background-image:     -ms-linear-gradient(top, #0C93C0, #FFF);
background-image:      -o-linear-gradient(top, #0C93C0, #FFF);
background-image:         linear-gradient(top, #0C93C0, #FFF);

Internet Explorer < 10

Für Internet Explorer-Versionen vor 10 verwenden Sie den folgenden Code:

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

Erklärung

• Präfixe werden für experimentelle CSS-Eigenschaften verwendet:

  • -webkit- für Webkit-Browser (Chrome, Safari)
  • -moz- für Firefox
  • -o- für Opera
  • -ms - für Internet Explorer
• linear-gradient ohne Präfix zeigt vollständige Übereinstimmung mit der CSS-Spezifikation an.

Referenz

• [ MDN: linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)

Das obige ist der detaillierte Inhalt vonWie kann ich browserübergreifende lineare Farbverläufe implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!