1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
---
title: '-webkit-box-reflect'
slug: Web/CSS/-webkit-box-reflect
tags:
- CSS
- Eigenschaft
- Non-standard
- Referenz
translation_of: Web/CSS/-webkit-box-reflect
---
<div>{{Non-standard_header}}{{CSSRef}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <code>-webkit-box-reflect</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft reflektiert den Inhalt eines Elements in einer bestimmten Richtung.</p>
<div class="warning"><strong>Hinweis:</strong> Dieses Feature ist <strong>nicht dazu gedacht, auf Webseiten verwendet zu werden</strong>. Um Reflektionen im Web zu erreichen, ist der Standardweg die Benutzung der CSS {{cssxref("element", "element()")}} Funktion.</div>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush:css">/* 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;
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code>above</code><em>, </em><code>below</code><em>, </em><code>right</code><em>, </em><code>left</code></dt>
<dd>Sind Schlüsselwörter, die angeben, in welche Richtung die Reflektion stattfinden soll.</dd>
<dt><code><length></code></dt>
<dd>Gibt die Größe der Reflektion an.</dd>
<dt><code><image></code></dt>
<dd>Beschreibt die Maske, die auf die Reflektion angewendet werden soll.</dd>
</dl>
<h3 id="Formale_Syntax">Formale Syntax</h3>
{{csssyntax}}
<h2 id="Spezifikationen">Spezifikationen</h2>
<p>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 {{cssxref("element", "element()")}}.</p>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Merkmal</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Grundlegende Unterstützung</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome("4.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatOpera("15.0")}}</td>
<td>{{CompatSafari("4.0")}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Merkmal</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Grundlegende Unterstützung</td>
<td>{{CompatNo}}</td>
<td>{{CompatAndroid("2.1")}}</td>
<td>{{CompatNo}}</td>
<td>22.0 {{CompatVersionUnknown}}</td>
<td>3.2 {{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>Die Apple <a class="external" href="http://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16" title="http://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16">Documentation</a></li>
<li>Die Webkit <a href="https://www.webkit.org/blog/182/css-reflections/">Spezifikation</a></li>
<li>Lea Verous Artikel bezüglich Reflektion unter Vernwendung von <a class="external" href="http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/" title="http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/">standardisierten CSS Features</a>.</li>
</ul>
|
