clip

Obsoleto: Esta característica ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, probablemente ya se ha eliminado de los estándares web relevantes, está en proceso de eliminación o solo se conserva por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad en la parte inferior de esta página para orientar su decisión. Tenga en cuenta que esta característica puede dejar de funcionar en cualquier momento.

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 o position:fixed.

Advertencia: This property is deprecated. Use clip-path instead.

Valor inicialauto
Applies toabsolutely positioned elements
Heredableno
Valor calculadoauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwise
Animation typea rectangle

Sintaxis

Sintaxis formal: 
clip = 
  <rect()>  |
  auto      

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )  



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

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

hut.jpg hut.jpg hut.jpg

Especificaciones

Specification
CSS Masking Module Level 1
# clip-property

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también