clip

Resumen

La propiedad de CSS clip define qué porción de un elemento es visible. La propiedad clip se aplica solamente sobre elementos con position:absolute.

  • Valor inicial error:(<s*codes+ids*=s*"initial-clip"[^>]*>)</s*codes+ids*=s*"initial-clip"[^>
  • Se aplica sobre elementos posicionados absolutamente
  • Heredable no
  • Media visual
  • Valor calculado Un rectángulo consistente de cuatro largos computados; caso contrario, como se ha especificado

Sintaxis

Sintaxis formal: <shape> | auto
clip: rect(1px, 10em, 3rem, 2ch)
clip: auto

clip: inherit

Valores

<shape>
Una forma rectangular del formulario
rect(<top>, <right>, <bottom>, <left>)   /* sintaxis estándar */
o
rect(<top> <right> <bottom> <left>)      /* sintaxis compatible inversa */
donde<top> y <bottom> especifícan desplazamientos de la esquina del borde superior de la caja, y <right>, y <left> especifican desplazamientos de la esquina del borde izquiedo de la caja.
<top>, <right>, <bottom>, y <left> pueden cada uno tenerun valor <length> o auto.
auto
El elemento no se recorta (valor por defecto)

Ejemplos

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 */
}

hut.jpg hut.jpg hut.jpg

Especificaciones

Especificación Estado Comentario
CSS Transitions Working Draft Define clip como animatable.
CSS Level 2 (Revision 1) Recommendation  

Compatibilidad entre exploradores

Función Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 1.0 1.0 (1.0) 4.0 7.0 1.0 (85)
8.0
En esta versión es soportada la sintaxis correcta con coma.
Función Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico ? ? ? ? ?

Ver también

Archivos adjuntos

Archivo Tamaño Fecha Adjunto por
hut.jpg
18558 bytes 2009-06-05 14:20:11 Jürgen Jeka
example.png
17512 bytes 2012-02-12 00:34:27 syssgx

Etiquetas y colaboradores del documento

Colaboradores de esta página: nadiafaya
Última actualización por: nadiafaya,