Was kann linear-gradient() in CSS tun? Verwendung von linear-gradient()

In diesem Artikel erfahren Sie, was linear-gradient() in CSS tun kann. Verwendung von linear-gradient(). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Ein Farbverlauf ist ein Bild, das sanft von einer Farbe zur anderen übergeht, sodass Sie einen sanften Übergang zwischen zwei oder mehr angegebenen Farben zeigen können. Diese werden häufig zum subtilen Einfärben von Hintergrundbildern, Schaltflächen und vielen anderen Dingen verwendet.

Gradient gibt den Grad des Gradienten an, indem die Start- und Endpunkte einer Gradientenlinie definiert werden (eine Gradientenlinie kann je nach Art des Gradienten geometrisch eine gerade Linie, ein Strahl oder eine Spirale sein) und dann den Farbverlauf der Punkte entlang dieser Linie angeben. Die Farben werden gleichmäßig gemischt, um den Rest der Linie zu füllen, und dann erzeugt jeder Verlaufstyp den eigentlichen Verlauf, indem er die Farbe der Verlaufslinie damit definiert.

Und CSS3 linear-gradient() kann einen linearen Farbverlauf erstellen, indem die Verlaufslinie als gerade Linie angegeben und dann mehrere Farben entlang der Linie platziert werden. Wir können ein Bild erstellen, indem wir eine unendliche Leinwand erstellen und das Bild mit Linien zeichnen, die senkrecht zur Verlaufslinie verlaufen, wobei die Farbe der gezeichneten Linie der Farbe der beiden sich schneidenden Verlaufslinien entspricht. Dies erzeugt einen sanften Übergang von jeder Farbe zur nächsten in der angegebenen Richtung. [Verwandte Videoempfehlungen: CSS3-Tutorial]

Jetzt geben wir Ihnen eine detaillierte Erklärung der Verwendung von linearem Farbverlauf (linear-gradient()) in Farbverläufen .

Die grundlegende Syntax von linear-gradient()

Die Syntax von linear-gradient ist:

 linear-gradient( [ <angle> | to <side-or-corner> ] ,<color-stop-list> )；

Dazu gehört der Farbverlauf Die Position, an der die Farbe stoppt. Es kann weggelassen werden. Wenn es weggelassen wird, stoppt es standardmäßig unten.

Die Richtung der Verlaufslinie kann auf zwei Arten angegeben werden:

1. Verwenden Sie

Für diesen Parameter bedeutet 0 Grad nach oben bedeutet ein positiver Winkel eine Drehung im Uhrzeigersinn, also zeigt 90 Grad nach rechts.

Die Einheitenkennung kann weggelassen werden, wenn

2. Verwenden Sie Schlüsselwörter (zu )

Wenn der Parameter nach oben, rechts, unten oder links geht, Der Winkel Farbverlaufslinien sind 0 Grad, 90 Grad, 180 Grad bzw. 270 Grad.

Wenn das Argument stattdessen darin besteht, eine Ecke des Felds anzugeben (z. B. die obere linke Ecke), muss die Verlaufslinie abgewinkelt sein, sodass sie in denselben Quadranten wie die angegebene Ecke zeigt und senkrecht zu beiden verläuft angrenzende Ecken des Farbverlaufsfelds, die Linien schneiden.

Verlängern Sie die Linie ausgehend von der Mitte des Verlaufsfelds im angegebenen Winkel in beide Richtungen. Der Endpunkt ist der Punkt auf der Verlaufslinie, an dem eine senkrecht zur Verlaufslinie gezeichnete Linie die Ecken des Verlaufsfelds in der angegebenen Richtung schneidet. Als Ausgangspunkt wird derselbe festgelegt, jedoch in entgegengesetzter Richtung.

Zum Beispiel:

background: linear-gradient(45deg, white, black);

Dieses Beispiel veranschaulicht anschaulich, wie Verlaufslinien gemäß den oben genannten Regeln berechnet werden. Hier werden die Start- und Endpunkte der Farbverlaufslinie sowie der tatsächliche Farbverlauf angezeigt, der durch das Element mit Hintergrund erzeugt wird.

Beachten Sie, dass die Start- und Endpunkte zwar außerhalb des Rahmens liegen, aber genau richtig positioniert sind, sodass der Farbverlauf an den Ecken rein weiß und an den gegenüberliegenden Ecken rein schwarz ist. Dies ist beabsichtigt, dies gilt immer für lineare Verläufe.

Die Formel für die Länge der Gradientenlinie (zwischen dem Startpunkt und dem Endpunkt) lautet:

abs(W * sin(A)) + abs(H * cos(A ))

Anweisungen:

1. Stellen Sie beim Definieren des Winkels der Verlaufslinie (in einem beliebigen Quadranten) sicher, dass 0 Grad nach oben zeigen, ein positiver Winkel bedeutet eine Drehung im Uhrzeigersinn,

2. W bedeutet Farbverlauf. Die Breite des Feldes.

3 und Endpunkte, dies ist jedoch nicht erforderlich: Die Verlaufslinien können sich unendlich in beide Richtungen erstrecken. Die Start- und Endpunkte sind einfach willkürliche Positionsmarkierungen, die definieren, wo der Startpunkt bei 0 %, 0 Pixel usw. liegt, wenn die angegebene Farbe stoppt, und der Endpunkt, der definiert, wo 100 % ist. Farbstopps dürfen Positionen vor 0 % oder nach 100 % haben.

Bestimmen Sie die Farbe eines linearen Farbverlaufs an einem beliebigen Punkt, indem Sie die eindeutige Linie finden, die senkrecht zur Farbverlaufslinie durch diesen Punkt verläuft. Die Farbe des Punktes ist die Farbe der Verlaufslinie an dem Punkt, an dem sich diese Linie schneidet.

Beispiel für einen linearen Farbverlauf

Beispiel 1: Verschiedene Möglichkeiten, einen grundlegenden vertikalen Farbverlauf anzugeben

linear-gradient(yellow, blue);
linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to top, blue, yellow);
linear-gradient(to bottom, yellow 0%, blue 100%);

Beispiel 2: Verwendung von Winkeln in Verläufen

Beachten Sie, dass Winkel zwar nicht genau mit Winkeln zwischen Ecken identisch sind, die Größen von Verlaufslinien jedoch immer noch korrekt sind sodass sich das Farbverlaufsgelb direkt in der oberen linken Ecke und das Blau direkt in der unteren rechten Ecke befindet.

linear-gradient(135deg, yellow, blue);
linear-gradient(-45deg, blue, yellow);

示例三：3色渐变，以及如何明确指定停止位置

linear-gradient(yellow, blue 20%, #0f0);

示例四：使用关键字指定的角到角渐变

请注意梯度分别是左下角和右上角的红色和蓝色，与第二个示例完全相同。此外，自动计算渐变的角度，使得50％（在这种情况下为白色）的颜色在左上角和右下角上延伸。

linear-gradient(to top right, red, white, blue)

总结：以上就是本篇文章关于linear-gradient()--线性渐变的全部内容，希望能对大家的学习有所帮助。

Das obige ist der detaillierte Inhalt vonWas kann linear-gradient() in CSS tun? Verwendung von linear-gradient(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!