Propriedade do clipe CSS
Exemplo
Recorte uma imagem:
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
Definição e uso
O que acontece se uma imagem for maior que o elemento que a contém?
A clip
propriedade permite especificar um retângulo para recortar um elemento posicionado absolutamente. O retângulo é especificado como quatro coordenadas, todas do canto superior esquerdo do elemento a ser recortado.
Nota: A clip
propriedade não funciona se for "overflow:visible".
Observação: a clip
propriedade está obsoleta e será substituída pela propriedade no futuro.
clip-path
Valor padrão: | auto |
---|---|
Herdado: | não |
Animavel: | sim. Leia sobre animáveis |
Versão: | CSS2 |
Sintaxe JavaScript: | object .style.clip="rect(0px,50px,50px,0px)" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
clip | 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
Sintaxe CSS
clip: auto|shape|initial|inherit;
Valores de propriedade
Value | Description | Play it |
---|---|---|
auto | No clipping will be applied. This is default | |
shape | Clips an element. The only valid value is: rect (top, right, bottom, left) | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Páginas relacionadas
Tutorial CSS: Posicionamento CSS
Referência HTML DOM: propriedade do clipe