Atributo clip CSS
Definição e uso
Propriedade clip corta elementos absolutamente posicionados.
O que acontece quando o tamanho de uma imagem é maior que o elemento que a contém? A propriedade "clip" permite que você defina o tamanho visível de um elemento, então ele será cortado e exibido dessa forma.
Descrição
Esta propriedade é usada para definir um retângulo de recorte. Para um elemento definido absolutamente, o conteúdo dentro deste retângulo é visível. O conteúdo fora dessa área de recorte será tratado com base no valor de overflow. A área de recorte pode ser maior ou menor que a área do conteúdo do elemento.
Veja também:
Tutorial do CSS:Posicionamento do CSS
Manual de referência do HTML DOM:propriedade clip
exemplo
Recorte de imagem:
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
Sintaxe do CSS
clip: auto|forma|initial|inherit;
valor da propriedade
| valor | descrição |
|---|---|
| forma | Definir a forma do elemento. O único valor de forma válido é: rect (superior, direita, inferior, esquerda) |
| auto | Valor padrão. Não é aplicado nenhum recorte. |
| inherit | Deve-se herdar o valor da propriedade clip do elemento pai. |
Detalhes técnicos
| Valor padrão: | auto |
|---|---|
| Herança: | não |
| Versão: | CSS2 |
| Sintaxe do JavaScript: | object.style.clip="rect(0px,50px,50px,0px)" |
Mais exemplos
- Definir a forma do elemento
- Este exemplo demonstra como definir a forma de um elemento. Este elemento é cortado na forma e então exibido.
Suporte do navegador
Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
