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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: clip
slug: Web/CSS/clip
translation_of: Web/CSS/clip
---
<div>
<div>{{CSSRef}}{{deprecated_header}}</div>
</div>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad de CSS <code>clip</code> define qué porción de un elemento es visible. La propiedad <code>clip</code> se aplica solamente sobre elementos con {{ cssxref("position","position:absolute") }} o {{cssxref("position", "position:fixed")}}.</p>
<div class="warning">
<p><strong>Warning:</strong> This property is deprecated. Use {{cssxref("clip-path")}} instead.</p>
</div>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis formal</a>: {{csssyntax("clip")}}
</pre>
<pre>clip: rect(1px, 10em, 3rem, 2ch)
clip: auto
clip: inherit</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code><shape></code></dt>
<dd>Una forma rectangular del formulario
<pre style="margin: 0;">rect(<top>, <right>, <bottom>, <left>) /* sintaxis estándar */
</pre>
o
<pre style="margin: 0;">rect(<top> <right> <bottom> <left>) /* sintaxis compatible inversa */</pre>
donde<code><top></code> y <code><bottom></code> especifícan desplazamientos de la <em>esquina del borde superior</em> de la caja, y <code><right></code>, y <code><left></code> especifican desplazamientos de la <em>esquina del borde izquiedo</em> de la caja.</dd>
<dd><code><top></code>, <code><right></code>, <code><bottom></code>, y <code><left></code> pueden cada uno tenerun valor {{cssxref("<length>")}} o <code> auto</code>.</dd>
<dt><code>auto</code></dt>
<dd>El elemento no se recorta (valor por defecto)</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<pre class="brush:css">p { border:dotted; position:relative; }
#img2 {
position:absolute; left:263px;
clip: rect(40px, 200px, 150px, 30px);
/* sintáxis estándar, no soportada por Internet Explorer 4-7 */
}
#img3 {
position: absolute; left:526px;
clip: rect(40px 200px 150px 30px);
/* sintáxis no-estándar, pero soportada por todos los exploradores importantes incluyendo Firefox y IE */
}</pre>
<p style="position: relative; border: dotted;"><img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg"> <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style=""> <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style=""></p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'clip') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Define <code>clip</code> como animatable.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'visufx.html#clipping', 'clip') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre exploradores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Función</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td rowspan="2">Soporte básico</td>
<td rowspan="2">1.0</td>
<td rowspan="2">1.0 (1.0)</td>
<td>4.0</td>
<td rowspan="2">7.0</td>
<td rowspan="2">1.0 (85)</td>
</tr>
<tr>
<td>8.0<br>
En esta versión es soportada la sintaxis correcta con coma.</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Función</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>Propiedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("overflow") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}</li>
</ul>
|
