Proprietà CSS clip

Definizione e uso

Proprietà clip per l'elemento posizionato assolutamente.

Cosa succede quando la dimensione di un'immagine è maggiore dell'elemento che la contiene? L'attributo "clip" ti permette di specificare la dimensione visibile di un elemento, in modo che venga ritagliato e visualizzato in questa forma.

Descrizione

Questa proprietà viene utilizzata per definire un rettangolo di ritaglio. Per un elemento definito in modo assoluto, il contenuto visibile è solo all'interno di questo rettangolo di ritaglio. Il contenuto al di fuori di questa area di ritaglio viene gestito in base al valore di overflow. L'area di ritaglio può essere più grande o più piccola dell'area del contenuto.

Vedi anche:

Corso CSS:Posizionamento CSS

Manuale di riferimento HTML DOM:Proprietà clip

Esempio

Ritaglio dell'immagine:

img
  {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
  }

Prova tu stesso

Sintassi CSS

clip: auto|forma|initial|inherit;

Valore dell'attributo

Valore Descrizione
forma Impostare la forma dell'elemento. L'unica valore legittimo è: rect (superiore, destro, inferiore, sinistro)
auto Valore predefinito. Non viene applicato alcun ritaglio.
inherit Si specifica che la proprietà clip dovrebbe essere ereditata dal valore dell'elemento padre.

Dettagli tecnici

Valore predefinito: auto
Inheritabilità: no
Versione: CSS2
Sintassi JavaScript: object.style.clip="rect(0px,50px,50px,0px)"

Altri esempi

Impostare la forma dell'elemento
Questo esempio dimostra come impostare la forma di un elemento. Questo elemento viene tagliato nella forma e poi visualizzato.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente questa proprietà.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 7.0