CSS3 Verlauf(Gradients)

CSS3Die Verlaufsfunktion ermöglicht es Ihnen, Verläufe von einer Farbe zur anderen zu erstellen, ohne dass Bilder verwendet werden müssen.

Mit CSS3Verlauf

CSS3Die Verlaufsfunktion bietet eine flexible Lösung, um sanfte Übergänge zwischen zwei oder mehr Farben zu erzeugen. Um dieses Effekt zu erreichen, mussten wir Bilder verwenden. Mit CSS3Verläufe können die Downloadzeit reduzieren und den Bandbreitengebrauch einsparen. Sie können Gradienten-Elemente proportional vergrößern oder verkleinern, ohne die Qualität zu beeinträchtigen, und die Ausgabe wird schneller gerendert, da sie vom Browser generiert wird.

Es gibt zwei Stile für Verläufe:Lineares(linear) undRadiär(radial).

CSS erstellen3 Linearer Verlauf(linear)

Um einen linearen Verlauf zu erstellen, müssen Sie mindestens zwei Farbschalter definieren. Aber um ein komplexeres Effekt zu erstellen, können Sie mehr Farbschalter definieren. Farbschalter sind die Farben, die Sie für einen glatten Übergang darstellen möchten. Sie können auch den Ausgangspunkt und die Richtung (oder den Winkel) des Verlaufs einstellen. Die Grundgrammatik für die Erstellung eines linearen Verlaufs mit Schlüsselwörtern kann wie folgt angegeben werden:

linear-gradient(winkel, farbe-stop1, color-stop2, ...)

Linearer Verlauf-Von oben nach unten

Der folgende Beispiel erstellt einen linearen Verlauf von oben nach unten. Dies ist der Standardwert.

.gradient {
　　　　/*　对于不支持渐变的浏览器的回退方案39;t support gradients　*/
　　　　background: red;
　　　　/*　对于 Safari　5.1　到　6.0　*/
　　　　background:　-webkit-linear-gradient(rot, gelb);
　　　　/*　对于 Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(rot, gelb);
　　　　
　　　　background: linear-gradient(rot, gelb);
}

Linearer Verlauf-Von links nach rechts

Der folgende Beispiel erstellt einen linearen Verlauf von links nach rechts.

.gradient {
　　　　/*　对于不支持渐变的浏览器的回退方案39;t support gradients　*/
　　　　background: red;
　　　　/*　对于 Safari　5.1　到　6.0　*/
　　　　background:　-webkit-linear-gradient-links, rot, gelb);
　　　　/*　对于 Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient-links, rot, gelb);
　　　　
　　　　background: linear-gradient(rechts, rot, gelb);
}

Linearer Verlauf-Diagonale

Sie können auch Verläufe in diagonaler Richtung erstellen. Der folgende Beispiel erstellt einen linearen Verlauf von der linken unteren Ecke des Elements bis zur rechten oberen Ecke.

.gradient {
　　　　/*　对于不支持渐变的浏览器的回退方案39;t support gradients　*/
　　　　background: red;
　　　　/*　对于 Safari　5.1　到　6.0　*/
　　　　background:　-webkit-linear-gradient(unten links, rot, gelb);
　　　　/*　对于 Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(unten links, rot, gelb);
　　　　
　　　　background: linear-gradient(zu oben rechts, rot, gelb);
}

Verlauf mit Winkel für die Richtung der linearen Verlauf festlegen

Wenn Sie die Richtung des Verlaufs weiter spezifizieren möchten, können Sie den Winkel einstellen, anstatt der vordefinierten Schlüsselwörter. Der Winkel 0deg erstellt einen von unten nach oben laufenden Verlauf, positive Winkel bedeuten eine Drehung im Uhrzeigersinn, was bedeutet, dass der Winkel90deg erstellt einen von links nach rechts laufenden Verlauf. Die Grundgrammatik für die Erstellung eines linearen Verlaufs mit Winkel kann wie folgt angegeben werden:

linear-gradient(winkel, farbe-stop1, color-stop2, ...)

Der folgende Beispiel zeigt Ihnen, wie Sie mit einem Winkel von links nach rechts einen linearen Verlauf erstellen.

.gradient {
　　　　/*　对于不支持渐变的浏览器的回退方案39;t support gradients　*/
　　　　background: red;
　　　　/*　对于 Safari　5.1　到　6.0　*/
　　　　background:　-webkit-linear-gradient(0deg, rot, gelb);
　　　　/*　对于 Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(0deg, rot, gelb);
　　　　
　　　　background: linear-gradient(90deg, rot, gelb);
}

Verlauf mit mehreren Farbschaltern erstellen

Sie können auch Verläufe für zwei oder mehr Farben erstellen. Der folgende Beispiel zeigt Ihnen, wie Sie mit mehreren Farbschaltern einen linearen Verlauf erstellen. Alle Farben sind gleichmäßig verteilt.

.gradient {
　　　　/*　对于不支持渐变的浏览器的回退方案39;t support gradients　*/
　　　　background: red;
　　　　/*　对于 Safari　5.1　到　6.0　*/
　　　　background:　-webkit-linear-gradient(red, yellow, lime);
　　　　/*　对于 Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(red, yellow, lime);
　　　　
　　　　background: linear-gradient(red, yellow, lime);
}

Position der Farbstopps einstellen

Farbmarken sind Punkte entlang der Verlaufsrichtung, an denen eine bestimmte Farbe vorhanden ist. Die Position der Farbmarken kann als Prozente oder absolute Längen angegeben werden. Sie können so viele Farbmarken wie nötig angeben, um das gewünschte Effekt zu erzielen.

.gradient {
　　　　/*　对于不支持渐变的浏览器的回退方案39;t support gradients　*/
　　　　background: red;
　　　　/*　对于 Safari　5.1　到　6.0　*/
　　　　background:　-webkit-linear-gradient(red, yellow　30%, lime　60%);
　　　　/*　对于 Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(red, yellow　30%, lime　60%);
　　　　
　　　　background: linear-gradient(red, yellow　30%, lime　60%);
}

Wiederholter linearer Verlauf

Sie können den wiederholten linearen Verlauf verwenden-linear-Die gradient() Funktion wiederholt den linearen Verlauf.

.gradient {
　　　　/*　对于不支持渐变的浏览器的回退方案39;t support gradients　*/
　　　　background: white;
　　　　/*　对于 Safari　5.1　到　6.0　*/
　　　　background:　-webkit-repeating-linear-gradient(black, white　10,青色　20%);
　　　　/*　对于 Internet Explorer　10　*/
　　　　background:　-ms-repeating-linear-gradient(black, white　10,青色　20%);
　　　　
　　　　background: repeating-linear-gradient(black, white　10,青色　20%);
}

CSS erstellen3radial gradient(radial)

In radialen Verläufen erscheinen Farben von einem Punkt aus und verbreiten sich in Form eines Kreises oder einer Ellipse, nicht wie bei linearen Verläufen von einer Farbe in eine andere in einer einzigen Richtung. Die Grund语法 für die Erstellung von radialen Verläufen kann wie folgt gegeben werden:

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

Diese radial-Die Parameter der gradient() Funktion haben die folgenden Bedeutungen:

• position —Bestimmt den Ausgangspunkt des Verlaufs, der mit Einheiten (px, em oder Prozente) oder Schlüsselwörtern (left, bottom usw.) angegeben werden kann.

• shape —Bestimmt die Form der endgültigen Form des Verlaufs. Es kann rund oder oval sein.

• size —Bestimmt die Größe der endgültigen Form des Verlaufs. Der Standardwert ist farthest-Seite.

Nachfolgende Beispiele zeigen die Erstellung von radialen Verlaufsgraden mit gleichmäßigem Abstand zwischen den Farbmarkern.

.gradient {
　　　　/*　对于不支持渐变的浏览器的回退方案39;t support gradients　*/
　　　　background: red;
　　　　/*　对于 Safari　5.1　到　6.0　*/
　　　　background:　-webkit-radial-gradient(red, yellow, lime);
　　　　/*　对于 Internet Explorer　10　*/
　　　　background:　-ms-radial-gradient(red, yellow, lime);
　　　　
　　　　background: radial-gradient(red, yellow, lime);
}

Form der radialen Verlaufsgröße einstellen

radial-Der shape-Parameter der gradient() Funktion wird verwendet, um die endgültige Form der radialen Verlaufsgröße zu definieren. Er kann den Wert circle oder ellipse annehmen. Dies ist ein Beispiel:

.gradient {
　　　　/*　对于不支持渐变的浏览器的回退方案39;t support gradients　*/
　　　　background: red;
　　　　/*　对于 Safari　5.1　到　6.0　*/
　　　　background:　-webkit-radial-gradient(circle, red, yellow, lime);
　　　　/*　对于 Internet Explorer　10　*/
　　　　background:　-ms-radial-gradient(circle, red, yellow, lime);
　　　　
　　　　background: radial-gradient(circle, red, yellow, lime);
}

Größe der radialen Verlaufsgröße einstellen

radial-Der size-Parameter der gradient() Funktion wird verwendet, um die Größe der endgültigen Form der Verlaufsgröße zu definieren. Die Größe kann in Einheiten oder Schlüsselwörtern festgelegt werden: closest-Seite, farthest-Seite, closest-Ecke, farthest-Ecke.

.gradient {
　　　　/*　对于不支持渐变的浏览器的回退方案39;t support gradients　*/
　　　　background: red;
　　　　/*　对于 Safari　5.1　到　6.0　*/
　　　　background:　-webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, 青色);
　　　　/*　对于 Internet Explorer　10　*/
　　　　background:　-ms-radial-gradient(left bottom, circle farthest-side, red, yellow, 青色);
　　　　
　　　　background: radial-gradient(circle farthest-side at left bottom, red, yellow, 青色);
}

重复径向渐变

您也可以使用该repeating-radial-gradient()功能重复径向渐变。

.gradient {
　　　　/*　对于不支持渐变的浏览器的回退方案39;t support gradients　*/
　　　　background: white;
　　　　/*　对于 Safari　5.1　到　6.0　*/
　　　　background:　-webkit-repeating-radial-gradient(black, white　10,青色　20%);
　　　　/*　对于 Internet Explorer　10　*/
　　　　background:　-ms-repeating-radial-gradient(black, white　10,青色　20%);
　　　　
　　　　background: repeating-radial-gradient(black, white　10,青色　20%);
}

CSS3透明度和渐变

CSS3渐变还支持透明度。堆叠多个背景时，你可以使用它来创建背景图像的淡入效果。

.gradient {
　　　　/*　对于不支持渐变的浏览器的回退方案39;t support gradients　*/
　　　　background: url("images/sky.jpg");
　　　　/*　对于 Safari　5.1　到　6.0　*/
　　　　background:　-webkit-linear-gradient(left, rgba(255,255,255,0)，rgba(255,255,255,1))，url("images/sky.jpg");
　　　　/*　对于 Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(left, rgba(255,255,255,0)，rgba(255,255,255,1))，url("images/sky.jpg");
　　　　
　　　　background: linear-gradient(to right, rgba(255,255,255,0)，rgba(255,255,255,1))，url("images/sky.jpg");
}