files/es/web/css/-webkit-box-reflect/index.html


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
  - No estándar(2)
  - Propiedad
  - Referencia
translation_of: Web/CSS/-webkit-box-reflect
---
<div>{{Non-standard_header}}{{CSSRef}}</div>

<h2 id="Resumen">Resumen</h2>

<p><code>La propiedad </code><a href="/es/docs/Web/CSS">CSS </a><code>-webkit-box-reflect</code> peermite reflejar el contenido del elemento en una dirección específica.</p>

<div class="warning"><strong>Nota:</strong> Esta característica <strong>no está pensada para ser usada en páginas Web</strong> .Para conseguir reflexión en la Web, la forma estándar es usando la función CSS {{cssxref("element", "element()")}} .</div>

<p>{{cssinfo}}</p>

<h2 id="Síntaxis">Síntaxis</h2>

<pre class="brush:css">/* Valores para la dirección */
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/* Valor del desplazamiento */
-webkit-box-reflect: below 10px;

/* Valor de máscara */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/* Valores globales */
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: unset;
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>above</code><em>, </em><code>below</code><em>, </em><code>right</code><em>, </em><code>left</code></dt>
 <dd>Son palabras clave que indican en qué dirección se realiza la reflexión.</dd>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>Indica el tamaño de la reflexión.</dd>
 <dt><code>&lt;image&gt;</code></dt>
 <dd>Describe la máscara que se aplicará a la reflexión.</dd>
</dl>

<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<p>Esta propiedad no está entre los objetivos de la especificación estándar y no será parte de CSS. La manera estándar para conseguir reflexión en CSS es el uso de la función {{cssxref("element", "element()")}}.</p>

<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</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>Característica</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</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="Ver_además">Ver además</h2>

<ul>
 <li>La <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">documentación</a> de Apple.</li>
 <li>La <a href="https://www.webkit.org/blog/182/css-reflections/">especificación </a> de Webkit.</li>
 <li>El artículo de Lea Verou sobre reflexión usando  <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/">característica CSS que están en el estándar</a>.</li>
</ul>