CSS box-Reflexion-Eigenschaft

Definition und Verwendung

box-reflect Die Eigenschaft wird verwendet, um den Reflexeffekt von Elementen zu erstellen.

box-reflect Der Wert der Eigenschaft kann sein:

  • below(Unten)
  • above(Oben)
  • left(Links)
  • right(Rechts)

Beachten Sie:box-reflect Die Eigenschaft ist ein nicht standardisiertes Attribut und muss verwendet werden -webkit- Präfix.

Beispiel

Beispiel 1

Fügen Sie eine Reflexionswirkung unter dem Bild hinzu:

img {
  -webkit-box-reflect: below;
}

Versuchen Sie es selbst

Beispiel 2

box-reflect Das Attribut kann auf jedem sichtbaren HTML-Element angewendet werden. Beispiel: Erstellen Sie eine Reflexionswirkung unter dem <p>-Tag:

p {
  -webkit-box-reflect: below;
}

Versuchen Sie es selbst

Beispiel 3

box-reflect Das Attribut kann auch in zweiwertiger Syntax verwendet werden. Beispiel: Erstellen Sie eine Reflexionswirkung unter dem Bild und stellen Sie einen Abstand von 70px ein:

img {
  -webkit-box-reflect: below 70px;
}

Versuchen Sie es selbst

Beispiel 4

box-reflect Das Attribut kann auch in dreiwertiger Syntax verwendet werden. Beispiel: Erstellen Sie eine Reflexionswirkung unter dem Bild, stellen Sie einen Abstand von 10px ein und lassen Sie sie sanft ausblenden:

img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

Versuchen Sie es selbst

CSS-Syntax

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

Attributwert

Wert Beschreibung
none Standardwert. Zeige keine Reflexionswirkung an.
below Erstellen Sie eine Reflexionswirkung auf der unteren Seite des Elements.
above Erstellen Sie eine Reflexionswirkung auf der oberen Seite des Elements.
left Erstellen Sie eine Reflexionswirkung auf der linken Seite des Elements.
right Erstellen Sie eine Reflexionswirkung auf der rechten Seite des Elements.
position offset

Zweiwertige Syntax:

  • position Stellen Sie die Position der Reflexion ein (below, above, left oder right).
  • offset Stellen Sie den Abstand der Reflexion ein. Der Abstand kann in Einheiten wie px, pt, cm angegeben werden. Der Standardwert ist 0.
position offset gradient

Dreiwertige Syntax:

  • position Stellen Sie die Position der Reflexion ein (below, above, left oder right).
  • offset Stellen Sie den Abstand der Reflexion ein. Der Abstand kann in Einheiten wie px, pt, cm angegeben werden. Der Standardwert ist 0.
  • gradient Stellen Sie den Übergangseffekt der Reflexion ein, z.B. Ausblenden.
initial Dieses Attribut wird auf seinen Standardwert gesetzt. Siehe: initial.
inherit Dieses Attribut wird von seinem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: none
Vererbbarkeit: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Attribute.
Version: CSS3
JavaScript-Syntax: object.style.webkitBoxReflect="below"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Version dar, die das Attribut vollständig unterstützt.

Zahlen mit dem Präfix -webkit- stellen die erste Version dar, die diesen Präfix unterstützt.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- Nicht unterstützt 4.0 -webkit- 15.0 -webkit-