-webkit-box-reflect CSS property
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Die CSS-Eigenschaft -webkit-box-reflect ermöglicht es Ihnen, den Inhalt eines Elements in eine bestimmte Richtung zu spiegeln.
Syntax
/* Direction values */
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;
/* Offset value */
-webkit-box-reflect: below 10px;
/* Mask value */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
/* Global values */
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: revert;
-webkit-box-reflect: revert-layer;
-webkit-box-reflect: unset;
Werte
Diese Eigenschaft wird als durch Leerzeichen getrennte Liste der folgenden Werte angegeben:
above,below,right,left-
Sind Schlüsselwörter, die angeben, in welche Richtung die Spiegelung erfolgen soll.
<length>-
Gibt die Größe der Spiegelung an.
<image>-
Beschreibt die Maske, die auf die Spiegelung angewendet werden soll.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
-webkit-box-reflect =
[ above | below | right | left ]? <length>? <image>?
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Spezifikationen
Nicht Teil eines Standards. Die standardmäßige Methode, Spiegelungen in CSS zu erstellen, besteht darin, die CSS-Funktion element() zu verwenden.
Browser-Kompatibilität
Siehe auch
- Die Apple-Dokumentation.
- Die WebKit-Spezifikation.