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.
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
| rtl
= ltr
<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
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.