Schritte zum Implementieren der Reflektion mit CSS3

Wir werden das Element der Reflexion verwenden, um einige Effekte zu erzielen. In diesem Artikel werden die umfassendsten Implementierungsschritte für die Verwendung von CSS3 zum Erstellen von Reflexionen erläutert.

box-reflect: none |. <direction> Standardwert, der keinen Reflexionseffekt angibt;

Richtung: Dieser Wert gibt die Richtung an, in der Box-Reflection eine Reflexion erzeugt, hauptsächlich einschließlich der folgenden Werte:

oben: zeigt an, dass die erzeugte Reflexion erfolgt

Über dem Objekt

(Originalbild); unten: zeigt an, dass sich die erzeugte Reflexion unter dem Objekt befindet (Originalbild);

links

: zeigt an die erzeugte Reflexion auf der linken Seite des Objekts (Originalbild);

rechts

: zeigt an, dass sich die erzeugte Reflexion auf der rechten Seite des Objekts befindet (Originalbild); Offset: wird verwendet, um die erzeugte Reflexion festzulegen. Der Abstand zwischen der Reflexion und dem Objekt (Originalbild) kann ein fester Pixelwert oder ein Prozentwert sein, wie zum Beispiel:

Verwenden Sie den Längenwert, um den festzulegen Abstand zwischen der generierten Reflexion und dem Originalbild. Solange es sich um die Längeneinheit in CSS handelt, kann dieser Wert negative Werte verwenden.

Verwenden Sie den Prozentsatz, um den Abstand zwischen der generierten Reflexion und dem Originalbild festzulegen , dieser Wert kann auch negative Werte verwenden

mask-box-image: Wird verwendet, um den Maskeneffekt der Reflexion festzulegen, der ein Hintergrund

Bild

oder ein durch einen Farbverlauf erzeugtes Hintergrundbild

. Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie das Transformationsverlaufsattribut in CSS3

Schritte zum Implementieren des Effekts dynamischer Schalter mit CSS3

So verwenden Sie CSS3-Attributselektoren, um die Rolle von JS zu ersetzen

Das obige ist der detaillierte Inhalt vonSchritte zum Implementieren der Reflektion mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!