-webkit-box-reflect

Kein Standard
Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden: Sie wird nicht für alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilitäten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften könnten in der Zukunft verändert werden.

Übersicht

Die -webkit-box-reflect CSS Eigenschaft reflektiert den Inhalt eines Elements in einer bestimmten Richtung.

Hinweis: Dieses Feature ist nicht dazu gedacht, auf Webseiten verwendet zu werden. Um Reflektionen im Web zu erreichen, ist der Standardweg die Benutzung der CSS element() Funktion.

Initialwert	`none`
Anwendbar auf	alle Elemente
Vererbt	Nein
Medien	visuell
Berechneter Wert	wie angegeben
Animationstyp	diskret
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Richtungswerte */
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/* Versatzwert */
-webkit-box-reflect: below 10px;

/* Maskenwert */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/* Globale Werte */
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: unset;

Werte

above, below, right, left: Sind Schlüsselwörter, die angeben, in welche Richtung die Reflektion stattfinden soll.
<length>: Gibt die Größe der Reflektion an.
<image>: Beschreibt die Maske, die auf die Reflektion angewendet werden soll.

Formale Syntax

[ above | below | right | left ]? <length>? <image>?wobei 
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
wobei 
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient() <a="" href="/de/docs/CSS/Wertdefinitionssyntax#Einfacher_Balken" title="Einfacher Balken: Genau eine der Entitäten muss angegeben werden">| <conic-gradient()></repeating-radial-gradient()>
wobei 
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
wobei 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
wobei 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> && <color-stop-length>
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>
wobei 
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

Spezifikationen

Diese Eigenschaft ist nicht standardisiert und wird nicht Teil von CSS sein. Der Standardweg, um eine Reflektion in CSS zu erzeugen, ist die Verwendung der CSS Funktion element().

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Desktop
Mobile

Merkmal	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Grundlegende Unterstützung	Nicht unterstützt	4.0	Nicht unterstützt	15.0	4.0

Merkmal	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Grundlegende Unterstützung	Nicht unterstützt	2.1	Nicht unterstützt	22.0 (Ja)	3.2 (Ja)

Siehe auch

Die Apple Documentation
Die Webkit Spezifikation
Lea Verous Artikel bezüglich Reflektion unter Vernwendung von standardisierten CSS Features.