Ausführliche Erklärung, wie der radiale CSS3-Gradient Mittel- und Größenformen definiert (Codebeispiel)

In diesem Artikel erfahren Sie ausführlich, wie der radiale CSS3-Gradient die Mitte und die Größenform definiert (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Damit radiale Farbverläufe --radial-gradient() in allen unterstützten Browsern korrekt funktionieren und einige neue Funktionen zur Verfügung stehen, um zukünftige Unterstützung abzudecken. Wir können so schreiben:

.demo {
	/* 不支持浏览器的后备 */ 
	background: #000000;
	
	/* 旧的WebKit语法 */ 
	background-image: -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));
	
	/* 新的WebKit语法 */ 
	background-image: -webkit-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	background-image: -moz-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	/* IE10 + */ 
	background-image: -ms-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	/* Opera (13?) */
	background-image: -o-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
        
    /* 标准写法*/
    background-image: radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
}

Lassen Sie uns die Syntax des radialen Gradienten Schritt für Schritt mit der Standardschrift analysieren:

.demo {  
    background-image: radial-gradient(center center, circle cover, black, blue, green, red, purple, white);  
}

Definieren Sie das Gradientenzentrum

Das erste Argument, das an die Funktion radial-gradient() übergeben wird (ja, radial-gradient() ist eine Funktion – deshalb hat sie Klammern), definiert die Ellipse, die erstellt wird, wenn der Gradient die zentrale Position abschließt. Im obigen Beispiel haben wir das Wertepaar „Mitte Mitte“ verwendet.

Das Wort „radial“ bedeutet „von der Mitte nach außen entlang eines Radius ...“. Der erste Parameter definiert also, wo die äußere Aktion beginnt.

Grundsätzlich kann dieser Parameter jeden Wert annehmen, den Sie in die Eigenschaft „Hintergrundposition“ eingeben. Der Standard- oder Anfangswert der Verlaufsmittenposition ist Mitte.

Form und Größe definieren

Der zweite Parameter in der Funktion definiert die Form und Größe des Farbverlaufs.

Der erste Teil des zweiten Parameters kann ein Kreis oder eine Ellipse sein (also: Kreis oder Ellipse). Der Unterschied besteht im Wesentlichen darin, dass die Ellipse kein perfekter Kreis ist. Abhängig von der Größe und dem Mittelpunkt des Farbverlaufs kann der Ellipsenwert den Farbverlauf jedoch elliptisch machen.

Der zweite Teil des zweiten Parameters (der die Größe definiert) kann einen von sechs Werten (Schlüsselwörtern) annehmen. Sie können sein:

1, nächstgelegene Seite (nächstes Ende)

2, nächstgelegene Ecke (nächste Ecke)

3, am weitesten entfernte Seite ( Die am weitesten entfernte Ecke)

4. Enthalten (enthalten)

6 Auf den ersten Blick sind diese Werte möglicherweise etwas schwer zu verstehen. Lassen Sie uns sie daher einzeln anhand von Beispielen aufschlüsseln, um sie zu verstehen. Lassen Sie uns einen einfachen Schwarz-Weiß-Verlauf verwenden, damit wir veranschaulichen können, was jeder Wert bewirkt. Hier ist der Code:

.demo {
  background-image: radial-gradient(50px 50px, circle closest-side, black, white);
}

Alle anderen Werte bleiben gleich, aber wir ändern den Größenwert (der derzeit auf der nächsten Seite angezeigt wird), damit Sie sehen können, welche Auswirkung jeder Wert auf das Erscheinungsbild hat Gradient.

Beachten Sie, dass ich die Mittelposition auf 50 Pixel 50 Pixel eingestellt habe, um die Form- und Größenwerte klarer zu machen.

nächste Seite

Dieser Wert bewirkt, dass die Kante des Farbverlaufs die Seite des Elements schneidet, die der Mitte des Farbverlaufs am nächsten liegt. So sieht es aus:

nächste Ecke

Dieser Wert macht die Kante des Farbverlaufs am nächsten an den Ecken von Die Elemente in der Mitte des Farbverlaufs treffen aufeinander. Hier ist es:

Beachten Sie, dass ein Teil der gesamten Form des Farbverlaufs abgeschnitten ist. Dies liegt daran, dass es in die Ecke des Elements gedrückt wird, sodass seine Kante die Ecke des Elements schneidet.

am weitesten entfernte Seite

Dieser Wert ist das Gegenteil des ersten Werts, wodurch der Rand des Farbverlaufs am weitesten von der Mitte des Farbverlaufs entfernt ist Elementseiten treffen aufeinander:

Beachten Sie, dass sich die Größe des Farbverlaufs in diesem Beispiel von den anderen beiden Werten unterscheidet, da der Farbverlauf gezwungen wird, sich zu strecken, um die äußerste Kante zu berühren des Elements.

farthest-corner (am weitesten entfernte Ecke)

Dieser Wert bewirkt, dass sich der Farbverlauf bis zur Ecke des Elements erstreckt, die am weitesten von der Mitte des Farbverlaufs entfernt ist:

Der Farbverlauf deckt jetzt mehr Elemente ab.

contain

Dieser Wert bewirkt, dass das Element den Farbverlauf vergrößert, bis er vollständig enthalten ist, ohne dass der Farbverlauf durch die Ränder des Elements abgeschnitten wird:

Kommen Sie mir bekannt vor? Das sollte es auch, denn dieser Wert entspricht, wie oben erwähnt, der nächstgelegenen Seite.

Abdeckung

Dieser Wert führt dazu, dass sich der Farbverlauf verstärkt, bis er die gesamte Fläche des Elements abdeckt:

Dieser Wert kommt mir auch bekannt vor, da dieser Wert der am weitesten entfernten Ecke entspricht.

Hinweis: Die Verwendung von Schlüsselwörtern zur Definition der Größe kann die Größe eines progressiven Kreises nicht genau definieren.

Zusammenfassung: Das Obige ist der gesamte in diesem Artikel vorgestellte Inhalt. Ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie der radiale CSS3-Gradient Mittel- und Größenformen definiert (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!